数据表清除 tbody答案

【问题标题】：Datatables clear tbody数据表清除 tbody
【发布时间】：2013-12-14 16:55:58
【问题描述】：

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

从下拉列表更改事件调用 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 已经过编辑以缩短它。这个 jQuery 很好用，它获取数据并将它们添加到新的表行中，同时更新数据表插件以使其与新数据一起工作。

问题是旧数据仍然存在，我一直在尝试用各种方法清理它

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

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

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

【问题讨论】：

标签： jquery datatables jquery-datatables

【解决方案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'
    ]);
});

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

如何找回那些被删除的行？

【解决方案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
                    ]
                });
                */
            }
        })
});

【讨论】：

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

【解决方案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

【讨论】：