如何在Ajax中重新初始化数据表

我需要的

*加载Ajax时，datable会重新加载。

• 我会逐步解释

  1. 以下是第一步的输出： http ： //postimg.org/image/c6p8jwp3b/ 。
  2. 以下是第二步的输出： http ： //postimg.org/image/6fm1z253h/
  3. 以下是第三步的输出： http ： //postimg.org/image/5btny60xf/ 。

• 无重新初始化数据表。

• 我只想要分页，搜索应该重新初始化。

• 我从这个url获得了帮助： http ： //datatables.net/forums/discussion/256/fnreloadajax/p1 。

Ajax调用代码：

if ($('#teamTable').size() > 0) { $('#teamTable').dataTable({ "sPaginationType": "bootstrap" }); } $("#save_team").click(function() { $.ajax({ type: "POST", url: "asana_team.php", data: { people_name: $('#e2').val(), team_name:$('#teamname').val() }, beforeSend : function(){ $("#team_table").remove(); $("#team_table_div").append(""); }, contentType: "application/x-www-form-urlencoded" }).done(function(data) { $("#loading").remove(); $('#team_table_div').append(data); $('#teamTable').dataTable({ "sPaginationType": "bootstrap" }); }); }); 

*工作正常但我在数据表中重新加入分页没有数据加载。

• 我已经使用此代码重新初始化表。

    function callBack() { var call= $('#teamTable'); call.dataTable({ "sPaginationType": "bootstrap", "sDom": "<'row-fluid'r>t<'row-fluid'>", "oLanguage": { "sLengthMenu": "_MENU_ records per page" } }); } $(document).ready(function() { callBack(); }); 

Answer 1

先破坏使用

  $('#teamTable').dataTable().fnDestroy(); 

然后重新开始

  $('#teamTable').dataTable(); 

Answer 2

这对我有用：

首先，我将数据表初始化为

 $(".myTable").DataTable({ "bDestroy": true, .... }); 

在我的情况下，“bDestroy”属性是必要的。

然后，当我有动态追加到我的表时，我会执行以下操作：

 $(".myTable").dataTable().fnDestroy(); //Append stuff to my table $(".myTable").DataTable({ "bDestroy": true, ... }); 

还要注意我在销毁表时使用dataTable()函数，并在DataTable()时使用DataTable()函数。

Answer 3

这对我有所帮助。

 $('#teamTable').dataTable().fnDestroy(); $('#teamTable').empty(); 

.empty()非常重要，因为在.fnDestory() ，表元素仍然存在潜伏的数据，这些数据也被转移到重新初始化的表中。

Answer 4

经过大量研究后，这对我有用： –首先检查dataTable是否存在，如果确实存在，则销毁dataTable并重新创建它

 if ($.fn.DataTable.isDataTable("#mytable")) { $('#mytable').DataTable().clear().destroy(); } $("#mytable").dataTable({... }); 

Answer 5

试试这个：

 $("#table").dataTable({ "destroy": true, // ... }); 

Answer 6

您可能需要将dataTable存储在变量中以便能够更改选项或调用函数。

第一步：将表存储到变量中

  var oTable = $('#teamTable').dataTable({ "sPaginationType": "bootstrap" }); 

第二步：在你的ajax请求中，当你想要清除表时。

 if (oTable != undefined) { oTable.fnClearTable(); } 

编辑

 var oTable; if ($('#teamTable').size() > 0) { var oTable = $('#teamTable').dataTable({ "sPaginationType": "bootstrap" //storing the instance of the dataTable for futher use in the future }); } $("#save_team").click(function() { $.ajax({ type: "POST", url: "asana_team.php", data: { people_name: $('#e2').val(), team_name:$('#teamname').val() }, beforeSend : function(){ $("#team_table").hide(); //we dont need to remove table, only hide it.. $("#team_table_div").append(""); }, contentType: "application/x-www-form-urlencoded" }).done(function(data) { $("#loading").remove(); $('#team_table_div').append(data); $('#teamTable').show(); //here we clean the data from the table if (oTable != undefined) { oTable.fnClearTable(); } }); });