How to reload/refresh jQuery dataTable?
Solution 1:
With version 1.10.0 of DataTables, it is built-in and easy:
var table = $('#example').DataTable();
table.ajax.reload();
or just
$('#example').DataTable().ajax.reload();
http://datatables.net/reference/api/ajax.reload()
Solution 2:
Destroy the datatable first and then draw the datatable.
$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();
Solution 3:
You can try the following:
function InitOverviewDataTable() {
oOverviewTable = $('#HelpdeskOverview').dataTable({
"bPaginate": true,
"bJQueryUI": true, // ThemeRoller-stöd
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": true,
"bAutoWidth": true,
"bProcessing": true,
"iDisplayLength": 10,
"sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
});
}
function RefreshTable(tableId, urlData) {
$.getJSON(urlData, null, function(json) {
table = $(tableId).dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);
for (var i = 0; i < json.aaData.length; i++) {
table.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();
});
}
// Edited by Prasad
function AutoReload() {
RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');
setTimeout(function() {
AutoReload();
}, 30000);
}
$(document).ready(function() {
InitOverviewDataTable();
setTimeout(function() {
AutoReload();
}, 30000);
});
http://www.meadow.se/wordpress/?p=536
Solution 4:
I had the same problem, this is how i fixed it:
first get the data with method of your choice, i use ajax after submitting results that will make change to the table. Then clear and add fresh data:
var refreshedDataFromTheServer = getDataFromServer();
var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();
here is the source: https://datatables.net/reference/api/clear()
Solution 5:
You could use an extensive API of DataTable to reload it by ajax.reload()
If you declare your datatable as DataTable()
(new version) you need:
var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();
If you declare your datatable as dataTable()
(old version) you need:
var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();