Javascript 重新加载数据表内容

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

您可以在

$（document）.ready（）之外定义
tblN
变量，然后在函数中访问它们：

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

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

使用
bretrive
param：

function removeData(source){
     (...)

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

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

这太棒了：）。我自己也找到了解决方案，但它很复杂，我使用的是单例模式，检查是否可以初始化。这比我的解决方案更整洁干净要好得多。非常感谢，我很抱歉，我犯了一个错误，并强调你的帮助是没有帮助的。