I'm new to using DataTables and I'v been struggling to change the body of my DataTable.

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

The API has a function called body() which is for getting table body. It 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.

I'm new to using DataTables and I'v been struggling to change the body of my DataTable.

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

The API has a function called body() which is for getting table body. It 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.

• javascript
• jquery
• ajax
• datatables

Share Improve this question Follow edited Nov 2, 2016 at 12:47 Gyrocode. 58.9k1616 gold badges156156 silver badges191191 bronze badges asked Nov 2, 2016 at 10:40 M.ShahrokhiM.Shahrokhi 42511 gold badge99 silver badges1919 bronze badges 1

• please avoid down votes and attach your code. – Mamdouh Saeed Commented Nov 2, 2016 at 10:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

If you need to replace all rows, I would remend using bination 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();

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

table.destroy();

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

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