M.Shahrokhi M.Shahrokhi - 1 month ago 10
Ajax Question

replacing the table body using DataTables

I'm new to using DataTables and I'v been struggling for an hour to do this:

I want to change the body of my DataTable .

I have been looking at tha API and searching the forum but I could not find anything.

The API has a function called .body() which is for getting table body. I would have been fantastic if there were a function for setting it.
Imagine I am getting a whole new table body through AJAX and I want to remove the old body and put it instead.
I used to do it by the jquery function 'html()' but looks like things are different here

Is there anyone familiar with the subject who can help me!? please!

Answer

If you need to replace all rows, I would recommend using combination of clear() and rows.add().

For example:

var table = $('#example').DataTable();

table.clear();
table.rows.add( [ 
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    }, {
        "name": "Garrett Winters",
        "position": "Director",
        "salary": "$5,300",
        "start_date": "2011/07/25",
        "office": "Edinburgh",
        "extn": "8422"
    } 
] );

Otherwise, if you want to replace table with HTML content you need to destroy the table with destroy(), replace tbody and then re-initialize the table again with DataTable().

For example:

var table = $('#example').DataTable();

table.destroy();

$('#example').html('<thead><tr><th></th></tr></thead><tbody></tbody>');

table = $('#example').DataTable();