Refresh / Initialize DataTable

Refresh / Initialize DataTable

ChristopherChristopher Posts: 5Questions: 0Answers: 0
edited January 2013 in DataTables 1.9
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
} );

Replies

  • ChristopherChristopher Posts: 5Questions: 0Answers: 0
    I figured this out -
    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.
  • ChristopherChristopher Posts: 5Questions: 0Answers: 0
    One other thing to change - remove the "bDestroy": true it is not needed with the doRefresh function.
This discussion has been closed.