重新加载数据表内容答案

【问题标题】：reload datatable content重新加载数据表内容
【发布时间】：2012-07-11 08:05:01
【问题描述】：

我确实有一个在页面上运行的代码。页面包含 3 个选项卡，每个选项卡包含一个表格和 2 个日期输入字段以及发送请求的按钮。 JS 看起来是这样的。

$(document).ready(function(){
    var tbl1 = $("tbl1").dataTable(){ //a lots of parametres}
    .. //2 more tbl2 and tbl3 variable initialization

    $("btn1").click(function(){
        tbl1.fnReloadAjax(tbl.oSettings());
    });
    ..//2 more btn2 and btn3 action initialization
})

首次加载页面时，日期输入字段跨度为 10 天，表格包含过去 10 天的记录。现在我做了一些更改，我确实有一个新的 ajax 请求，它从服务器中删除记录，我需要更新表格内容。每行都有一个按钮，按下它会删除服务器上的这条记录。一切正常，但要查看更改需要重新加载整页。我试过这样做：

function removeData(source){
     $.post('delete_record',{}, function ...)// ajax request to remove data
     alert("deleted");  // notice to user that record was deleted
     tbl1.fnReloadAjax(tbl1.oSettings()); // ERROR no ref to tbl1(trying to update table content)
}

错误是因为 removeData 函数内部对 tbl1 对象的引用不存在，因为 tbl1 是在 $(document).ready 函数内部定义的。我怎样才能获得到 tbl1 的链接

我现在已经尝试从函数 ready() 中取出表初始化代码。类似的东西

var getoTabele = function(){
  var oTable = $("tbl1").dataTable..... //initialization code
  ...
  ...
  return oTable;
}

现在我可以在 removeData 函数中使用 oTable，因为我可以在 removeData 函数中获取链接

var oTable = getoTable() // Data warning. Cannot reinitialise DataTable

这是正确的，因为函数 getoTable 创建新的 oTable 而不是引用旧的 oTable

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

使用bRetrieve参数：

function removeData(source){
     (...)

     // this will return the previous, already initialized dataTable object.
     var tbl1 = $("tbl1").dataTable({'bRetrieve':true});

     tbl1.fnReloadAjax(tbl1.oSettings()); 
}

【讨论】：

这很棒:)。我自己确实找到了解决方案，但它很复杂，我使用的是单例模式，并且检查 oTable 是否已初始化。
这比我的解决方案更整洁干净要好得多。非常感谢，很抱歉，我做错了，并强调你的帮助没有帮助。

【解决方案2】：

您可以在$(document).ready() 之外定义您的tblN 变量，然后您将在您的函数中访问它们：

var tbl1, tbl2, tbl3;
$(document).ready(function(){
    // **** //
    tbl1 = $("tbl1").dataTable();
});

function removeData() {
    // **** //
    tbl1.fnReloadAjax(tbl1.oSettings());    
}

【讨论】：