将 jQuery 数据表重置为默认值

Posted 2023-05-07

【中文标题】将 jQuery 数据表重置为默认值

【英文标题】：Reset jQuery DataTables to default

【发布时间】：2013-12-17 00:57:43

【问题描述】：

使用 jQuery DataTables，我们需要将表格的列宽、可见性和当前分页数重置为默认值并重新加载。如何清理其 cookie、数据并重新加载？

【问题讨论】：

您能更具体地了解这些方法吗？

您的问题能具体一点吗？

【参考方案1】：

由于您没有提供任何代码以开始我给您我的代码，您可以自定义适合您的要求。我认为您正在使用 ajax 获取数据。如果是这样，您可以使用它。

var resultexist=false; // Initialize status variable
var reportjqdt=null; // Data Table reference


function populateReportData (result)  // Result is an arry of data
var headers=result.arrh;
var data=result.arr;
var dataType=result.arrDT;

var $resultdiv = $("#repResult");
var hdrfdr="<tr>";


for(var i=0;i<headers.length;i++) 
hdrfdr+="<th>"+headers[i]+"</th>";

hdrfdr+="</tr>";


var tbldata="<tbody>";
for(var i=0;i<data.length;i++) 
if(i%headers.length==0 )
tbldata+="<tr>";

    tbldata+="<td class="+(i%(2*headers.length)==0?"odd":"even")+" >"+data[i]+"</td>";
if((i+1)%headers.length==0 )
tbldata+="</tr>";


tbldata+="</tbody>";

var table="<table id='reportDataTBL' > <thead>"+ hdrfdr + "</thead>"+ tbldata + "<tfoot>"+hdrfdr+"</tfoot></table>";



if(resultexist)
reportjqdt.fnDestroy();  // Delete if datatable exists

$resultdiv.html(table);

reportjqdt =  $('#reportDataTBL').dataTable("bJQueryUI": true);
resultexist=true;

【讨论】：

感谢您的回答，但 fnDestroy() 对我不起作用。我尝试手动删除标题的宽度并重置它们的可见性，然后再次调用保存状态方法。

实际上没有你的代码我不能给你确切的解决方案。因此，如果它有帮助并且您解决了，那么就可以了。

【参考方案2】：

我对 jQuery DataTables 不熟悉，但是查看文档您可以尝试几件事：

销毁表并重建它：

 TableVariable.fnDestroy();
 TableVariable.fnDraw();

尝试 fnDraw 函数而不破坏它，它应该重绘表格：

TableVariable.fnDraw();

在这些示例中，TableVariable 是您用来初始化 DataTable 的变量，如下所示：

var TableVariable = $(".table").dataTable();

祝你好运

【参考方案3】：

通常它应该与

一起使用

var oTable = $('#example').dataTable();
oTable.fnDraw();

但是，既然您说它不是，那么您应该简单地考虑删除表，然后尝试调用与您最初用于创建表的方法相同的方法。这样，表格将在没有任何先前设置的情况下重新创建。

由于一切都发生在客户端，您可能不会注意到太大的差异。

【讨论】：

我们也将列的大小和可见性保存在数据库中。我找不到任何帮助，但提到 fnDestroy() 的人帮我添加了一个自定义方法。使用 fnDestroy() 对我没有帮助，它会破坏 UI，但不会清理 cookie，也不会重置为默认值。

我不确定fnDestroy() 中是否存在错误，或者我们使用此组件的方式不正确。

检查你的数据表初始化和默认选项。您可以调整它们并尝试一下。

【参考方案4】：

 //init dataTable
 function loadDataTable()
 
   table = $("#table").dataTable( ... );
 

 // Reset dataTable
function resetFilter()
 
  // Clear table state
  table.state.clear();
  // Destroy table state
  table.destroy();
  // Reload dataTable without reload the page
  loadDataTable();
 

享受吧。