Refresh / Initialize DataTable
Refresh / Initialize DataTable
Christopher
Posts: 5Questions: 0Answers: 0
Is there a simple way to "reload" a data table that is already initialized? For example: I am using a data table on a web page that then makes a database update then reloads the whole page. Therefore, the page has retrieved new data after the update and I want to reload the table. I have tried the bDestroy but it appears to change the table formatting on the page. Here is my code - please point me in the proper direction so I may reload the table. I am using an AJAX call and have retrieved the data back before the code below is executed. Thank you for your help.
$('#test').dataTable( {
"bDestroy": true,
"aaData": msg.requests ,
"aoColumns": [
{ "mData": "tourStart" },
{ "mData": "tourEnd" },
{ "mData": "expire" },
{ "mData": "rangeStart" },
{ "mData": "rangeEnd" },
{ "mData": "lTour" },
{ "mData": "sTour" },
{ "sDefaultContent": "",
"fnRender": function( oObj ) {
return '';
}
}
],
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"aLengthMenu": [[5, 10], [5, 10]],
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 7 ] }
],
"bFilter": false,
"bProcessing": true
} );
$('#test').dataTable( {
"bDestroy": true,
"aaData": msg.requests ,
"aoColumns": [
{ "mData": "tourStart" },
{ "mData": "tourEnd" },
{ "mData": "expire" },
{ "mData": "rangeStart" },
{ "mData": "rangeEnd" },
{ "mData": "lTour" },
{ "mData": "sTour" },
{ "sDefaultContent": "",
"fnRender": function( oObj ) {
return '';
}
}
],
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"aLengthMenu": [[5, 10], [5, 10]],
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 7 ] }
],
"bFilter": false,
"bProcessing": true
} );
This discussion has been closed.
Replies
First initialize and load the data table as the code above if you would like to use mData and JSON. Then perform a piece of functionality and call your AJAX method / load new data in JSON. Instead of trying to initialize the tables again we need to call a refresh function, clear the table and add new data. This is possible by doing this:
In the code above we need to change one thing -
var oTable = $('#test').dataTable( { ... rest of code
After the successful AJAX call send the data to your doRefresh function.
function doRefresh(data) {
oTable.fnClearTable();
oTable.fnAddData(data);
oTable.fnDraw();
}
The rest of the table will stay together and the rows will be populated again. If anyone sees any issue with this please post a comment since it is working for me. Hope this helps another developer.