1

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

4

2 回答 2

2

使用bRetrieve参数：

function removeData(source){
     (...)

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

     tbl1.fnReloadAjax(tbl1.oSettings()); 
}
于 2012-07-11T08:23:32.727 回答
0

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

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

function removeData() {
    // **** //
    tbl1.fnReloadAjax(tbl1.oSettings());    
}
于 2012-07-11T08:20:26.363 回答