数据表清除 tbody

Posted 2023-05-07

【中文标题】数据表清除 tbody

【英文标题】：Datatables clear 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？

【参考方案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