Datatables clear tbody

Question

I have a HTML table that I fill with data from an AJAX jQuery call.This table uses the jQuery plugin - datatables for paging, sorting and so on.

The jQuery call gets cal

Answer 1

Answer updated in order to target the dataTables 1.10.x API. The original answer below using fnMethods were targeting 1.9.x but is still applicable for any 1.9.x - 1.10.x dataTable().

When a dataTable is instantiated with DataTable() which returns an API instance :

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

As the original answer an example of emptying entirely and inserting a new row :

$("#delete").click(function() {
    dataTable.clear();
    dataTable.row.add([
        'new engine',
        'new browser',
        'new platform',
        'new version',
        'new css'
    ]).draw();
});

Notice draw(). When a table is manipulated through the API it is necessary to call draw() to update the display in order to reflect those changes.

demo -> http://jsfiddle.net/9kLmb9fu/

---

You should use

$('#table').dataTable().fnClearTable();

Here is an example from the jsfiddle below, deleting all content from (on a paginated table!) and insert a new row :

$("#delete").click(function() {
    dataTable.fnClearTable();
    dataTable.fnAddData([
        'new engine',
        'new browser',
        'new platform',
        'new version',
        'new css'
    ]);
});

see fiddle -> http://jsfiddle.net/yt57V/