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

Question

我有两个 DataTables页面上的对象，让我们称它们为 searchResultsTable 和 currentPortfolioTable。我正在使用 fnReloadAjax单击按钮时按需重新加载数据表的插件。然而，只有一个表加载了新数据 (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 是页面的正确且唯一的表格
• 控制台记录没有错误或问题
• JShinted js 确保没有js错误或失误
• 关闭 fnReloadAjax dataTableObjects.searchResultsTable 和 dataTableObjects.currentPortfolioTable 仍然无法正确重新加载
• 将 fnReloadAjax 替换为 fnDraw

Answer 1

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

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

Note: To reload data when using server-side processing, just use the built-in API function fnDraw rather than this plug-in.

现在，虽然我意识到您已经确认从 /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 回调中更改 $.ajax 调用的 url 设置，如下所示:

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

同样，一定要将第二个数据表的语句中的 两个 都更改为 2

最后，将您的点击事件更改为以下内容:

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

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

希望这能解决问题。