Populate Entries to a jQuery Datatable on click event

Question

I'm trying to populate my table with the entries of an Ajax Request.

I can confirm that my Json data has the appropriate format in order to be presented in the Datatable.

The problem is that after the request, the entries are not populated even if i'm able to see them in my console.

$(document).ready(function () {

    var $submitButton = $('.ladda-button[type="button"]').ladda();

    var table = $('.table').DataTable({
        processing: true,
        searching: false,
        responsive: true,
        filter: false,
        deferLoading:0,
        serverSide: true,
        bLengthChange: false,
        bSort: false,
        ajax: {
            url: "myUrl",
            type: 'post',
            dataSrc: function (json) {
                $submitButton.ladda('stop');
                var entries = json.data;
                return entries;
            }
        },


    });

    $(document).on('click',$submitButton, function(e){
        e.preventDefault();
        $submitButton.ladda('start');
        table.ajax.reload();
        return false;
    });
});

Answer 1

I think you are reloading the table prematurely. Since you're using ajax you only want to reload once your data is available.

Try this as a test(reloading after 10 secs)

setTimeout( function () {
    table.ajax.reload();
}, 10000 );

I'm not familiar with ladda but maybe its event based and you can modify your code to call reload after the stop event or something similar.