Datatable : How to call async function after ajax call

Question

I want to manipulate the data after receiving it from the server in Datatable. Data comes from the web server. But the response data from server is encoded. To decode the data I need to call another asynchronous function (here decodeData() ). I tried to call async funtion in dataSrc section like following example but data is not displayed in the table.

$(document).ready(function () {
    $('#example').DataTable({
        processing: true,
        serverSide: true,
       "ajax": {
    "url": "http://localhost:3000",
    "dataSrc": async function ( json ) { // I added async
      // call async funtion here
       json.data = await decodeData(json)
      return json.data;
    }
    });
});

Then I tried to using the xhr event, but it didn't work properly.

var table = $('#example')
          .on('xhr.dt', async function ( e, settings, json, xhr ) {  // added async
                json = await decodeData(json);
    } ).DataTable({
        processing: true,
        serverSide: true,
        "ajax": {
            "url": "http://localhost:3000",
                           },
    });

As far as I understand Datatable event handlers don't expect async functions - so they don't wait for the Promise to complete. How can I call the asynchronous function before the table is drawn?

According to this datatables.net/reference/option/ajax, you can set the value of "ajax" to a function. I'm not sure, but I would assume it accepts an async function. That function could; fetch data -> decode data -> callback(data) — Jelmer
– Jelmer, Commented Nov 18, 2022 at 9:39

Muhammed YILMAZ · Accepted Answer · 2022-11-18 09:29:04Z

0

$(document).ready(function () {
    $('#example').DataTable({
        processing: true,
        serverSide: true,
       "ajax": {
    "url": "http://localhost:3000",
    "dataSrc": async function ( json ) { // I added async
      // call async funtion here
       json.data = await decodeData(json)
      return json.data;
    }
    });
});

I suppose your url link is not valid. Where is it going to fetch data?

Example, in my usages, i use links like: http://localhost:3000/persons/getpersons

Is your link valid?

and additionaly,

If your ajax is not success, it will not show the data. For this, you can write an error section to your ajax like this and log it:

    $(document).ready(function () {
            $('#example').DataTable({
                processing: true,
                serverSide: true,
               "ajax": {
            "url": "http://localhost:3000",
            "dataSrc": async function ( json ) { // I added async
              // call async funtion here
               json.data = await decodeData(json)
              return json.data;
            },
            "error": function(xhr){ 
                console.log(xhr);  
             }
            });
        });

edited Nov 18, 2022 at 9:29

answered Nov 18, 2022 at 9:26

Muhammed YILMAZ

116 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

montiago Over a year ago

the url is not matter here, it's just example.

Muhammed YILMAZ Over a year ago

Did you get data from ajax? are you sure? I ask this because if you do not get data, it does no matter what you write after

montiago Over a year ago

yes. of course I got the data.

vsam · Accepted Answer · 2022-11-18 12:27:42Z

-1

I found the solution and it works for me.

      $('#example').DataTable({
    processing: true,
    serverSide: true,
    ajax: function (data, callback, settings) {
$.ajax({
  url: 'http://localhost:3000/',
  data: data,
   success:async function(data){
   data = await decodeData(data);
 
    callback(data);
 
  }
});

answered Nov 18, 2022 at 12:27

vsam

6647 silver badges28 bronze badges

Collectives™ on Stack Overflow

Datatable : How to call async function after ajax call

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related