Javascript 两个jQuery数据表-尝试重新加载、显示/隐藏列等-其中一个数据表失败，但另一个数据表失败

我在一个页面上有两个对象，让我们称它们为searchResultsTable和currentPortfolioTable。当我点击一个按钮时，我正在使用插件按需重新加载数据表。但是，只有一个表加载了新数据（currentPortfolioTable），searchResultsTable对数据执行ajax请求，但无法将新的（有效的）数据加载到表中

我试图破坏DataTable并创建一个新的DataTable，甚至重写fnReloadAjax插件的部分内容，看看是否可以产生不同的结果

即使仅为currentPortfolioTable调用fnReloadAjax，它也拒绝显示加载的新数据

searchResultsTable无法加载新数据的问题也发生在使用DataTable的aoColumns属性的bVisible状态显示/隐藏列时

示例代码：

var dataTableObjects = dataTableObjects || {
    "searchResultsTable": {},
    "currentPortfolioTable": {}
};

var _rankingsRootUrl = window.ROOT + 'rankings/';

var _defaultDataTableSettings = {
    "aoColumns": [
        {   "bSortable": false,
            "sTitle": "Add to Portfolio",
            "bVisible": true
        },
        {
            "bSortable": true,
            "sTitle": "Name of Investment",
            "bVisible": true
        },
        {   "bSortable": true,
            "sTitle": "Chart",
            "bVisible": true
        },
        {   "bSortable": true,
            "sTitle": "Rating",
            "bVisible": true
        },
        {   "bSortable": true,
            "sTitle": "Minimum",
            "bVisible": true
        },
        {   "bSortable": true,
            "sTitle": "ROR",
            "bVisible": false
        },
        {   "bSortable": true,
            "sTitle": "Max DD",
            "bVisible": false
        },
        {   "bSortable": true,
            "sTitle": "Sharpe",
            "bVisible": false
        },
        {   "bSortable": true,
            "sTitle": "Sterling",
            "bVisible": false
        }
    ],
    "aaSorting": [
    ],
    "sAjaxSource": _rankingsRootUrl + 'search_results/',
    "bServerSide": true,
    "bProcessing": true,
    "bPaginate": false,
    "bLengthChange": false,
    "sScrollY": 200,
    "sScrollX": "100%",
    "sScrollXInner": "100%",
    "bScrollCollapse": true,
    "fnServerData": function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json',
            "type": "POST",
            "url": sSource,
            "data": aoData,
            "success": fnCallback
        } );
    },
    "fnServerParams": function ( aoData ) {
        aoData.push(
            {"name": "program_type", "value": $(':input#RankingProgramType').val()},
            {"name": "program_name", "value": $(':input#RankingProgramName').val()},
            {"name": "min_investment", "value": $(':input#RankingMinimumInvestment').val()},
            {"name": "rate_of_return", "value": $(':input#RankingRateOfReturn').val()},
            {"name": "max_dd", "value": $(':input#RankingMaxDd').val()},
            {"name": "time_span", "value": $(':input#RankingTimeSpan').val()},
            {"name": "flags", "value": $(':input#RankingFlags').val()},
            {"name": "strategies", "value": $(':input#RankingStrategies').val()},
            {"name": "recommended", "value": $(':input#RankingRecommended').val()},
            {"name": "portfolio_id", "value": (window.PORTFOLIO && window.PORTFOLIO.id) || ""}
        );
    }
};

var _defaultCurrentPortfolioTableSettings = {
    "aoColumns": [
        {
            "bSortable": true,
            "sTitle": "Name of Investment",
            "bVisible": true
        },
        {   "bSortable": true,
            "sTitle": "Chart",
            "bVisible": true
        },
        {   "bSortable": true,
            "sTitle": "Rating",
            "bVisible": true
        },
        {   "bSortable": true,
            "sTitle": "Minimum",
            "bVisible": true
        },
        {   "bSortable": true,
            "sTitle": "ROR",
            "bVisible": false
        },
        {   "bSortable": true,
            "sTitle": "Max DD",
            "bVisible": false
        },
        {   "bSortable": true,
            "sTitle": "Sharpe",
            "bVisible": false
        },
        {   "bSortable": true,
            "sTitle": "Sterling",
            "bVisible": false
        }
    ],
    "aaSorting": [
    ],
    "sAjaxSource": _rankingsRootUrl + 'current_portfolio/',
    "bServerSide": true,
    "bProcessing": true,
    "bPaginate": false,
    "bLengthChange": false,
    "sScrollY": 200,
    "sScrollX": "100%",
    "sScrollXInner": "100%",
    "bScrollCollapse": true,
    "fnServerData": function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json',
            "type": "POST",
            "url": sSource,
            "data": aoData,
            "success": fnCallback
        } );
    },
    "fnServerParams": function ( aoData ) {
        aoData.push(
            {"name": "portfolio_id", "value": (window.PORTFOLIO && window.PORTFOLIO.id) || ""}
        );
    }
};

dataTableObjects.searchResultsTable = $('#search-results table').dataTable(_defaultDataTableSettings);
dataTableObjects.currentPortfolioTable = $('#currently-in-portfolio table').dataTable(_defaultCurrentPortfolioTableSettings);

$("#rankings").on("click", "a.add", function (e){
   dataTableObjects.searchResultsTable.fnReloadAjax('/datable1-url');
   dataTableObjects.currentPortfolioTable.fnReloadAjax('/datable2-url');
   e.preventDefault();
});

尝试的修复程序：

• 使用fnReloadAjax中的回调方法为dataTable2重新加载数据
• 验证每个表的ID是否唯一
• 验证dataTableJSObjects是否为页面的正确且唯一的表
• 控制台未记录任何错误或问题
• js提示js以确保没有js错误或错误
• 关闭FNRELLOADAJAX dataTableObjects.searchResultsTable和dataTableObjects.currentPortfolioTable仍无法正确重新加载
• 使用fnReloadAjax替换为fnDraw

---

一种想法是，在两个不同的表上连续调用fnReloadAjax可能会导致dataTable2发生冲突，如果等待dataTable 1完成加载，则不会发生冲突

fnReloadAjax函数接受一个回调参数，该参数可能有助于

例如：

dataTableObjects.dataTable1 = $('#search-results table').dataTable();
dataTableObjects.dataTable2 = $('#currently-in-portfolio table').dataTable();

$("#rankings").on("click", "a.add", function (e){
    dataTableObjects.dataTable1.fnReloadAjax('/datable1-url', null, reloadDataTable2, false);
    e.preventDefault();
});

// outside of the "ready" block
var reloadDataTable2 = function () {
    dataTableObjects.dataTable2.fnReloadAjax('/datable2-url');
};

我还没有测试过这个，所以我不确定它是否能工作

---

然而，我在寻找解决我自己问题的方法时看到了这个问题，我想我会提供这个想法。希望这能有所帮助。

一个想法是，在两个不同的表上连续调用fnReloadAjax可能会导致dataTable2发生冲突，如果它等待dataTable 1完成加载，则不会遇到这种冲突

fnReloadAjax函数接受一个回调参数，该参数可能有助于

例如：

dataTableObjects.dataTable1 = $('#search-results table').dataTable();
dataTableObjects.dataTable2 = $('#currently-in-portfolio table').dataTable();

$("#rankings").on("click", "a.add", function (e){
    dataTableObjects.dataTable1.fnReloadAjax('/datable1-url', null, reloadDataTable2, false);
    e.preventDefault();
});

// outside of the "ready" block
var reloadDataTable2 = function () {
    dataTableObjects.dataTable2.fnReloadAjax('/datable2-url');
};

我还没有测试过这个，所以我不确定它是否能工作

---

然而，我在寻找解决我自己问题的方法时看到了这个问题，我想我会提供这个想法。希望这能有所帮助。

我刚刚举了一个例子，说明它应该工作得很好：。我对fnReloadAjax做了一个小小的调整，这样您就可以看到重新加载对静态数据源的影响（只需使用计数器重写其中一个单元格），但除此之外，DataTables站点没有任何更改

---

因此，我认为要提供任何进一步的帮助，我们需要看到一个它不起作用的例子。

我刚刚把一个例子放在一起，说明它应该可以很好地工作：。我对fnReloadAjax做了一个小小的调整，这样您就可以看到重新加载对静态数据源的影响（只需使用计数器重写其中一个单元格），但除此之外，DataTables站点没有任何更改

---

因此，我认为要提供任何进一步的帮助，我们需要看到一个它不起作用的示例。

感谢您发布额外的源代码详细信息。我想我可能已经发现了问题

在

fnReloadAjax

插件的描述中，添加了以下注释：

注意：要在使用服务器端处理时重新加载数据，只需使用 内置API函数，而不是此插件

现在，虽然我意识到您已经确认从

/datable1 url

和

/datable2 url

请求的数据是正确的，并且在使用

fnReloadAjax

时，第一个数据表甚至可以正确地重新加载；然而，根据Allan的说明，由于问题的神秘性质，没有更好的答案，我认为当前实现的问题可能确实是由于

fnReloadAjax

不是配置表的合适解决方案

不过，我也意识到，仅仅将

fnReloadAjax

更改为fnDraw并不能解决您的问题，因为现在已经设置好了表……是时候变得棘手了

以下是我的解决方案：

首先在脚本顶部添加以下两行：

var isInitialLoadTable1 = true;
var isInitialLoadTable2 = true;

接下来，在每个dataTable设置变量中，在

fnServerParams

回调之后添加以下附加回调：

"fnInitComplete": function( oSettings, json ) {
    isInitialLoadTable1 = false;
}

确保将第二个表中的

isInitialLoadTable1

更改为

initialLoadTable2

[并且不要忘记

fnServerParams的结束大括号后的逗号：

：-）]

现在来看看这些诡计。。。在

fnServerData

回调中，更改

$调用的
url
设置，如下所示：

"url": (isInitialLoadTable1 ? sSource : '/datable1-url'),

同样，对于第二个dataTable，请确保将此语句中的两个1都更改为2

最后，将单击事件更改为以下内容：

$("#rankings").on("click", "a.add", function (e) {
    dataTableObjects.searchResultsTable.fnDraw();
    dataTableObjects.currentPortfolioTable.fnDraw();
    e.preventDefault();
});

现在，我还没有对此进行测试，但真正的测试取决于您的代码和数据

希望这能解决问题。
感谢您发布额外的源代码详细信息。我想我可能已经发现了问题

在
fnReloadAjax
插件的描述中，添加了以下注释：

注意：要在使用服务器端处理时重新加载数据，只需使用
内置API函数，而不是此插件

现在，虽然我意识到您已经确认从
/datable1 url
和
/datable2 url
请求的数据是正确的，并且在使用
fnReloadAjax
时，第一个数据表甚至可以正确地重新加载；然而，根据艾伦的笔记，由于p