How to stop the server side draw event when adding new data to table
How to stop the server side draw event when adding new data to table
AmarMyana
Posts: 2Questions: 1Answers: 0
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.
Answers
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.
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:
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
then reset the url to original if none of the checkboxes are selected.
I hope it helps someone.