Question

I am working in a project where I am suppose to be adding the Grid type facility in the data to be shown.

For that I am using the Datatable plugin of the jquery.

It is working fine and perfect.

I have only one concern that whenever I try to take the updated table from the server (via Ajax) the Datatable losses its functionality. I mean that whenever I load new table from the server, it shows in normal mode.

For that to work I have to add this piece of code like:

$.ajax({ 
    url: "<GIVE_ME_NEW_TABLE>",
    type: "POST",
    data: <THE_DATA_TO_BE_POSTED>,
    success: function(data){
        //data is fully prepared HTML string for representing the table
        $('#id_of_the_div_where_to_show_the_table').html(data);
        $('#id_of_the_table').dataTable({
           "bJQueryUI": true
        });
    },
    error : function(){
        //alert error
    }
});

So this is to be called on every Ajax call where the table is updated.

Answer 1

Alternatively you can connect DataTables to an ajax data source via sAjaxSource param. You’ll need to modify the server side script to return correct response. See ajax arrays and ajax objects examples from DataTables doc.

$(document).ready(function() {
    var oTable = $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": "/yoursite/ajaxTableDataSource",
    } );
} );