Question

我有一个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？

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()来更新显示以反映这些更改。

演示 - ＆gt;的 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' ]); });

看小提琴 - ＆gt;的 http://jsfiddle.net/yt57V/

Answer 2

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

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

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
                    ]
                });
                */
            }
        })
});

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

数据表明确了

4 个答案: