Datatables AJAX.reload Callback data

obieMD5

When using Datatables (Ver: 1.10.16), I noticed that the data in the API is not updated immediately via ajax.reload in the callback even though the site says the callback is not called until the new data has arrived and been redrawn.

Notes up front:

1. All the data is formatted correctly and displays in the table before and after the ajax.reload, including the new data from the reload.
2. If I click reload twice, the api sees the new data properly and ApplyHeaderFilters works properly.

When I say the API seeing the data properly I mean like so:
$('#dtTbl').DataTable().column('1:visible').data().unique()

The ApplyHeaderFilters is the callback on ajax.reload and uses the above JS command to get unique values from the column. The data returned from the JS command are not reflecting the new data that is returned from the reload.

This is in the Document Ready:

batchDT = $('#dtTbl').DataTable( {
    deferLoading: true,
    pageLength: 25,
    pagingType: 'simple_numbers',
    scrollx: true,
    initComplete: function () {
        ApplyHeaderFilters($(this).attr('id'), this.api());
    },
    ajax: {
        url: "mysite.cfm?method=gettabledata", 
        type: 'POST'
    },
    columns: [
        { title: "Description", name: "description", data: "description"},
        { title: "Is Active", name: "isactive", data: "isactive"},
        { title: "List Item ID", name: "listitemid", data: "listitemid"},
        { title: "Name", name: "name", data: "name"},
        { title: "Table Ref ID", name: "tablerefid", data: "tablerefid", orderable: false}
    ]
} );

$("#reload").on('click',function(){
    batchDT.ajax.reload(ApplyHeaderFilters('dtTbl', $('#dtTbl').DataTable()));
});

colin

Hi @obieMD5 ,

I tried it here - just to confirm the callback is called afterwards, and it appears to be working fine to me. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

obieMD5

So it would appear that I have found out why and fixed it. I don't know why it was doing it. I know that it wasn't waiting because I had console logs that were firing the callback before the other reload was completed. Anyways, the only to get it to waiting until reload was complete was to wrap my callback function in an anon function. This is what it is now and works fine:

$("#reload").on('click',function(){
    batchDT.ajax.reload(function(){
          ApplyHeaderFilters('dtTbl', $('#dtTbl').DataTable());
    });
});