Get data in json using javascript and datatables

Question

I have a javascript as below, which can fetch the data from backed in json format. But How can i pass it to another function , ie datatables to populate it

<script>
var returndata;

$.getJSON("/api/dashboard_data/", success);

function success(data) {
    returndata = data;
    window.alert(returndata);
    return returndata;
    // do something with data, which is an object
}

$(document).ready(function() {
      $('#example').DataTable( {
        data: returndata,
        columns: [
            { title: "Action" },
            { title: "Input" },
            { title: "State" },
            { title: "Completed" },
           { title: "Project" },
        ]
    } );
} );
 </script>

In above code in window.alert(returndata), i get the json data which has been returned from backed.

But the same variable "returndata" when i use it in function ready it is empty. How can i get it in ready function.

Answer 1

You are calling two asynchronous functions here. $.getJSON() and $(document).ready() . It looks that ready() is faster than getJSON() which means returndata is empty when you try to fill your data table.

Try this to make sure you have always the correct order:

<script>

$(document).ready(function() {
      $.getJSON("/api/dashboard_data/", function(returndata) {
           $('#example').DataTable( {
               data: returndata,
               columns: [
                    { title: "Action" },
                    { title: "Input" },
                    { title: "State" },
                    { title: "Completed" },
                    { title: "Project" },
               ]
           });
      }); 
});
</script>

Answer 2

Firstly, which jQuery plugin are you using for DataTables? Is it this one ? The first thing I would do would be to put everything inside the $document.ready() as the documentation demonstrates. This ensures that all your code executes after the DOM is ready. Let me know what happens after that.

Also this part of the documentation could help if you are using the DataTables API. It could be as simple as a misspelling depending on what you're trying to do as quoted from the docs here:

The result from each is an instance of the DataTables API object which has the tables found by the selector in its context. It is important to note the difference between $( selector ).DataTable() and $( selector ).dataTable() . The former returns a DataTables API instance, while the latter returns a jQuery object.

Answer 3

I know this is not a good solution, just a hack. You can use window.setInterval or window.setTimeout function to check for data and execute the required function. Don't forget to clear the interval.

Answer 4

Follow the Datatables documentation: https://datatables.net/examples/server_side/simple.html

You'll have to do something like this:

$('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": _getData(),
    "columns": [
        {title: "Action"},
        {title: "Input"},
        {title: "State"},
        {title: "Completed"},
        {title: "Project"}
    ]
});

function _getData(data, callback) {
    $.getJSON("/api/dashboard_data/", success);
    function success(data) {
    // you'll probably want to get recordsTotal & recordsFiltered from your server
        callback({
            recordsTotal: 57,
            recordsFiltered: 57,
            data: data 
        })
    }
}

I haven't tested this code, but this should guide you in the right direction :)