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 called from a dropdownlist change event

$("#Dropdownlist").on("change", function () {
        $.ajax({
                type: "POST",
                url: "@Url.Action("Action", "Controller")",
                //contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>appending data here</td></tr>");
                    });

                    $('#table').dataTable().fnDestroy();
                    $('#table').dataTable({
                        "aoColumns": [
                          { "bSortable": false },
                          null, null, null, null, null
                        ]
                    });
                }
            })
    });

This jQuery has been edited to shorten it. This jQuery works great, it gets the data and add them in the new table rows while also updating the datatable plugin to make it work with the new data.

The issue is that the old data still remains, I've been trying to clean it up with various things like

$("#tbodyID tr").detach();
$("#tbodyID tr").remove();
$("#tbodyID").empty();
$("#tbodyID").html("");
$("tbody").empty();
$("tbody").html("");
$('#table').dataTable().fnDraw(false)

I put these before the AJAX call. But none works, the old data still remains and every time I call the AJAX call, it keeps refilling it with new data while the old still remains.

Is there a way to clear the tbody with either jQuery or a inbuilt datatables function?

Answer 1

you can use DataTables function fnClearTable and fnAddData like this

$("#Dropdownlist").on("change", function () {
    $.ajax({
            type: "POST",
            url: "@Url.Action("Action", "Controller")",
            //contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var oTable = $('#table').dataTable();//get the DataTable
                oTable.fnClearTable();//clear the DataTable
                $.each(data, function (key, item) {
                    oTable.fnAddData(["appending ","data","here"]);//add new row
                    //each element in the array is a td
                });
                /*no need to destroy and create new DataTable
                $('#table').dataTable().fnDestroy();
                $('#table').dataTable({
                    "aoColumns": [
                      { "bSortable": false },
                      null, null, null, null, null
                    ]
                });
                */
            }
        })
});

Answer 2

You can use the clear() function to remove all rows of data from the table as follows:

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

Answer 3

I think what you're looking for is this piece of code:

var oSettings = $('#table').dataTable().fnSettings();
var iTotalRecords = oSettings.fnRecordsTotal();
for (i=0;i<=iTotalRecords;i++) {
   $('#table').dataTable().fnDeleteRow(0,null,true);
}

Source: http://www.datatables.net/forums/discussion/comment/15862

Answer 4

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 <tbody> 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 <tbody> (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/