jquery - 数据表清空body

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() 实例化数据表时它返回一个 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()更新显示以反射(reflect)这些更改。

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

参见 fiddle -> http://jsfiddle.net/yt57V/