刷新jQuery数据表

对此有很多疑问，但我从来没有找到一个对我有用的问题。 我有一个简单而简单的HTML表，其中正在填充来自AJAX调用的行。 然后我想用DataTable插件更新表，但它不起作用。 我有一个HTML表格，如下所示：

 
 
 
1
 
2
 
3
 
4
 
5
 
 
 
 
  

在我的jQuery页面加载中

 $(document).ready(function(){ var oTable = $('#myTable').dataTable({ "aoColumns": [ { "bSortable": false }, null, null, null, null ] }); }); 

最后我的下拉列表更改function

 $("#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("12345"); }); } }) var oTable = $('#myTable').dataTable(); // Nothing happens var oTable = $('#myTable').dataTable({ // Cannot initialize it again error "aoColumns": [ { "bSortable": false }, null, null, null, null ] }); }); 

追加等等已被修改以缩短它等等所以不要过分关注它。

基本上问题是如何更新表，我可以做我的AJAX并将新数据添加到表中，但数据表插件不会随之更新。 我尝试过其他类似的东西

.fnDraw（假）;

但是当我收到JSON错误时它什么也没做

fnReloadAjax（）

关于如何刷新表格的任何线索？

Answer 1

试试这个

最初，您初始化表，因此首先清除该表

$('#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("12345"); }); } }) $('#myTable').dataTable().fnDestroy(); $('#myTable').dataTable({ // Cannot initialize it again error "aoColumns": [ { "bSortable": false }, null, null, null, null ] }); }); 

DEMO

Answer 2

我知道这是一篇旧post，但我刚刚调查了这个问题，我找到了在DataTable手册页中解决它的最简单方法： https ： //datatables.net/reference/api/ajax.reload%28%29所有你需要调用table.ajax.reload（）;

Answer 3

 var table = $('#product_table').DataTable({ "bProcessing": true, "serverSide": true, responsive: true, "ajax": { url: get_base_url + "product_table", // json datasource type: "post", // type of method ,GET/POST/DELETE error: function () { $("#employee_grid_processing").css("display", "none"); } } }); //call this funtion $(document).on('click', '#view_product', function () { table.ajax.reload(); }); 

Answer 4

我做过与此相关的事情……以下是一个示例javascript，其中包含您需要的内容。 这里有一个演示： http ： //codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

 //global the manage member table var manageMemberTable; function updateMember(id = null) { if(id) { // click on update button $("#updatebutton").unbind('click').bind('click', function() { $.ajax({ url: 'webdesign_action/update.php', type: 'post', data: {member_id : id}, dataType: 'json', success:function(response) { if(response.success == true) { $(".removeMessages").html('
'+ '×'+ '  '+response.messages+ '
'); // refresh the table manageMemberTable.ajax.reload(); // close the modal $("#updateModal").modal('hide'); } else { $(".removeMessages").html('
'+ '×'+ '  '+response.messages+ '
'); // refresh the table manageMemberTable.ajax.reload(); // close the modal $("#updateModal").modal('hide'); } } }); }); // click remove btn } else { alert('Error: Refresh the page again'); } } 

Answer 5

从版本1.10.0开始，您可以使用ajax.reload（） api。

 var table = $('#myTable').DataTable(); table.ajax.reload(); 

请记住使用$('#myTable').DataTable()而不是$('#myTable').dataTable()