Datatables清空tbody

Question

我有一个HTML表格，我使用从AJAX jQuery调用获取的数据填充该表格。这个表格使用了jQuery插件-datatables来进行分页、排序等操作。

这个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
                        ]
                    });
                }
            })
    });

这段 jQuery 代码已经被编辑过以缩短长度。它可以很好地工作，获取数据并将其添加到新的表行中，同时更新 datatable 插件以便与新数据一起使用。

问题在于旧数据仍然存在，我一直在尝试使用各种方法来清理它，比如

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

在 AJAX 调用之前，我放置了这些代码。但是没有任何作用，旧数据仍然存在，并且每次调用 AJAX 调用时，它都会用新数据重新填充，而旧数据仍然存在。

是否有一种方法可以使用 jQuery 或内置的 datatables 函数清除 tbody 中的数据？

- HenrikP

Answer 1

为了针对 dataTables 1.10.x API 更新答案。原始答案使用 fnMethods 针对的是 1.9.x，但仍适用于任何 1.9.x - 1.10.x 的 dataTable()。

当使用 DataTable() 实例化 dataTable 时，会返回一个 API 实例：

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

作为清空 <tbody> 并插入新行的示例，可以参考以下代码：

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

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

演示 -> http://jsfiddle.net/9kLmb9fu/

---

你应该使用

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

这里有一个来自下面 jsfiddle 的例子，删除 <tbody> 中的所有内容（在分页表格上！），并插入一行新数据：

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

请查看 jsfiddle -> http://jsfiddle.net/yt57V/。

- davidkonrad

Answer 2

您可以使用clear()函数来从表格中删除所有数据行，具体操作如下：

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

- T J

---

如何找回已删除的行？ - retro_coder

Answer 3

你可以像这样使用 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
                    ]
                });
                */
            }
        })
});

- Abraham Uribe

---

如果我想在td或tr上添加类和数据绑定，我该怎么做？ - Juliver Galleto

Answer 4

我想你需要的是这段代码：

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

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

以下是需要翻译的内容：

我正在使用DataTables，并且希望在表格中添加一列，其中包含一个按钮，当用户单击该按钮时，将触发JavaScript函数。我已经尝试了几种方法，但都没有成功。请问如何实现这个功能？谢谢！

- G.Mendes