对此有很多疑问,但我从未找到对我有用的问题。我有一个简单的HTML表,其主体被AJAX调用中的行填充。然后,我想用DataTable插件更新表,但是它不起作用。我有一个看起来像这样的HTML表:
<table id="myTable"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> </thead> <tbody> </tbody> </table>
在我的jQuery页面加载中
$(document).ready(function(){ var oTable = $('#myTable').dataTable({ "aoColumns": [ { "bSortable": false }, null, null, null, null ] }); });
最后是我的下拉列表更改功能
$("#dropdownlist").on("change", function () { $("tbody").empty(); $.ajax({ type: "POST", url: "@Url.Action("ActionHere", "Controller")", dataType: "json", success: function (data) { $.each(data, function (key, item) { $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"); }); } }) var oTable = $('#myTable').dataTable(); // Nothing happens var oTable = $('#myTable').dataTable({ // Cannot initialize it again error "aoColumns": [ { "bSortable": false }, null, null, null, null ] }); });
附件等已被修改以缩短它的长度,以此类推,因此不要过多地关注它。
基本上,问题是如何更新表,我可以执行AJAX并将新数据添加到表中,但是datatable插件不会随之更新。我尝试了其他事情,例如
.fnDraw(false);
但是当我收到JSON错误时它什么也没做
fnReloadAjax()
关于如何刷新表的任何线索?
试试这个
最初,您初始化了表,所以首先清除该表
$('#myTable').dataTable().fnDestroy();
然后在ajax成功后再次初始化
$('#myTable').dataTable();
像这样
$("#dropdownlist").on("change", function () { $("tbody").empty(); $.ajax({ type: "POST", url: "@Url.Action("ActionHere", "Controller")", dataType: "json", success: function (data) { $.each(data, function (key, item) { $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"); }); } }) $('#myTable').dataTable().fnDestroy(); $('#myTable').dataTable({ // Cannot initialize it again error "aoColumns": [ { "bSortable": false }, null, null, null, null ] }); });
演示