我有一个
HTML表格,我填写AJAX 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/
原文地址:https://www.jb51.cc/jquery/179562.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。