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