jQuery 数据表清除 tbody

Datatables clear tbody

提问by HenrikP

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.

我有一个 HTML 表，其中填充了来自 AJAX jQuery 调用的数据。该表使用 jQuery 插件 - 用于分页、排序等的数据表。

The jQuery call gets called from a dropdownlist change event

从下拉列表更改事件中调用 jQuery 调用

$("#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.

此 jQuery 已被编辑以缩短它。这个 jQuery 工作得很好，它获取数据并将它们添加到新的表行中，同时还更新数据表插件以使其与新数据一起工作。

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.

我把这些放在 AJAX 调用之前。但是没有任何效果，旧数据仍然存在，每次我调用 AJAX 调用时，它都会不断用新数据重新填充它，而旧数据仍然存在。

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

有没有办法用 jQuery 或内置数据表函数清除 tbody？

回答by davidkonrad

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

已更新答案以针对 dataTables 1.10.x API。下面使用的原始答案fnMethods针对 1.9.x 但仍然适用于任何 1.9.x - 1.10.x dataTable()。

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

当使用DataTable()返回 API 实例的 dataTable 实例化时：

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

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

作为原始答案<tbody>完全清空并插入新行的示例：

$("#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.

注意draw()。当通过 API 操作表时，需要调用draw()更新显示以反映这些更改。

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

演示 -> 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 :

这是下面 jsfiddle 中的一个示例，从<tbody>（在分页表上！）中删除所有内容并插入一个新行：

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

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

见小提琴 - > http://jsfiddle.net/yt57V/

回答by T J

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

您可以使用该clear()函数从表中删除所有数据行，如下所示：

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

回答by Abraham Uribe

you can use DataTables function fnClearTable and fnAddData like this

您可以像这样使用 DataTables 函数 fnClearTable 和 fnAddData

$("#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
                    ]
                });
                */
            }
        })
});

回答by G.Mendes

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

来源：http: //www.datatables.net/forums/discussion/comment/15862