Question

我确实有一个在页面上运行的代码。页面包含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而不是旧的

Answer 1

使用bRetrieve param：

function removeData(source){
     (...)

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

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

Answer 2

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

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

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

重新加载数据表内容

2 个答案: