Question

I am using DataTables plugin to make my table interactive.

The table is echo’d by PHP on the page.

When I add a record to the DB I am loading the table using jQuery load() but this breaks DataTables.

How can I update the table while still keeping DataTables Intact?

Note: I am using DOM as the data source and not server side processing.

Answer 1

If doing a complete reload of the whole table, wrap your initial datatables initialization code in a function. Call that function on page load. When replacing the table completely with ajax you likely should remove the table parent div that is created by plugin as a wrapper for all the non table DOm elements it creates. If table ID=”example” , wrapper id=”example_wrapper”.

Here’s enough code will likely get you well on your way. There are easy ways to only update rows but since request is for a complete table reload I’ve followed that

function initDataTables(){
    $('#myTable').datatables({/* put all current options here*/})

}


/* within ready event of pageload */

$(function(){
    initDataTables();
    /* all other page load code*/

});

/* use $.get to reload table */

$.get( tableUpdateUrl, data, function( returnData){

    $('#myTable').parent().replaceWith(returnData);

    /* re-initalize plugin*/

    initDataTables();
});