How to stop the server side draw event when adding new data to table

AmarMyana

I've table with data loaded from server side, as there will be huge datasets i've to go for server side loading.

This is my table config:

var table = $('#table').DataTable({
"processing": true,
"serverSide": true,
"ajax" : {
"url": "...",
"type": "POST"
},
"columns": [
{
"orderable": false,
"data" : 'id',
"render" : function( data, type, meta ) {

                return '..';
            }
        },
        {
            "orderable": true, 
            "data"     : ".."
        },
        {
            "orderable": true, 
            "data"     : "..",
            "className": 'right-align'
        },
        {
            "orderable": true,
            "data"     : "..",
            "className": 'right-align'
        },
        {
            "orderable": false,
            "data"     : 'id',
            "defaultContent": "",
            "className": 'center-align',
            "render"   : function(data, type, meta) {

                return '..';
            }
        },
        {
            "orderable": false, // flags
            "data"     : {
                'inserted' : 'inserted',
                'deleted'  : 'deleted'
            },
            "defaultContent": "",
            "className"    : 'center-align',
            "render"   : '..'
            }
        }
    ],
    'order': [
        [1, "asc"]
    ],
    "language": {
        "lengthMenu": '..'
    }
}); 

And I've to provide filtering capability for this table ( there are few checkboxes which will trigger the post request on change) so I'm send the filters to backend and it gives me new dataset.

$.post(url, { 'filters' : data} , function(collection){

 table.clear().draw();
 table.rows.add(JSON.parse(collection));
 table.columns.adjust().draw();

});

It's firing total 3 requests, one for the post request and two other the draw request ( As I'm drawing twice).

According to server side processing On every draw server side will fire the post request to update the table which is overriding the new dataset.

How can I draw the table with new dataset?

Please help me in resolving this issue.

Thanks a lot for making datatables.

AmarMyana

One way to do it

We can use ajax.data to specify a custom parameter sent to the server, see one of the ways to do it below.

$('#example').DataTable({
    "ajax": {
        "url": "data.json",
        "data": function (d){
            d.example_select = $('#example-select').val();
        }
    }
});

ajax.data callback function will be called every time DataTables requests data from the server.

To reload data from the server after your filter changes, you can use ajax.reload() function, for example:

$('#example-select').on('change', function(){
    $('#example').DataTable().ajax.reload(); 
});

Other way

If you've different routes for filtering and processing( i.e paging, ordering, searching) then we can change the url on every change like

table.ajax.url(url).load()

then reset the url to original if none of the checkboxes are selected.

table.ajax.url(originalUrl).load()

I hope it helps someone.