jquery – 数据清除tbody

我有一个 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
                        ]
                    });
                }
            })
    });

这个jQuery已被编辑以缩短它.
这个jQuery非常棒,它可以获取数据并将它们添加到新的表行中,同时还可以更新datatable插件,使其与新数据一起使用.

问题是旧数据仍然存在,我一直在试图用各种各样的东西来清理它

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

我把这些在AJAX调用之前.
但没有效果,旧的数据仍然存在,每次调用AJAX调用时,它仍然保留旧数据,并重新填充新数据.

有没有办法用jQuery或内置的数据表功能清除tbody？

解决方法

答案更新为了定位数据表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 css'
    ]);
});

看小提琴 – > http://jsfiddle.net/yt57V/

jquery – 数据清除tbody

解决方法

相关文章