javascript - 2つのjQueryDataTables（リロード、列の表示/非表示などの試行）は、一方のDataTableで失敗しますが、もう一方では失敗しません

Question

1つのページに2つのDataTablesオブジェクトがあり、それらをsearchResultsTableとcurrentPortfolioTableと呼びましょう。ボタンをクリックしたときに、 fnReloadAjaxプラグインを使用してDataTablesをオンデマンドでリロードしています。ただし、テーブルの1つだけが新しいデータ（currentPortfolioTable）をロードし、searchResultsTableはデータのajaxリクエストを実行しますが、新しい（そして有効な）データをテーブルにロードできません。

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エラーや間違いがないことを確認するためのJShintedjs
• fnReloadAjaxをオフにしてもdataTableObjects.searchResultsTableおよびdataTableObjects.currentPortfolioTableが正しくリロードされない
• fnReloadAjaxを使用してfnDrawに置き換えました

Answer 1

追加のソースコードの詳細を投稿していただきありがとうございます。私は問題を見つけたかもしれないと思います...

fnReloadAjaxプラグインの説明で、AllanJardineは次のメモを追加しました。

注：サーバー側の処理を使用するときにデータを再ロードするには、このプラグインではなく、組み込みのAPI関数fnDrawを使用するだけです。

/datable1-urlさて、あなたが要求されているデータ/datable2-urlが正しいこと、そして最初のデータテーブルが使用時に正しくリロードされていることを確認したことを私は理解していますfnReloadAjax。ただし、Allanのメモに照らして、問題の不思議な性質のために適切な回答がないため、現在の実装の問題は、実際fnReloadAjaxにその方法の適切な解決策ではないことが原因である可能性が高いと言えます。テーブルが構成されています。

fnReloadAjaxただし、テーブルが現在設定されているため、fnDrawに変更するだけでは、問題は解決しないこともわかります...トリッキーになる時間...

これが私の解決策です：

スクリプトの先頭に次の2行を追加することから始めます。

var isInitialLoadTable1 = true;
var isInitialLoadTable2 = true;

次に、各dataTable設定変数で、コールバックの後に次の追加のコールバックを追加しfnServerParamsます。

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

必ず2番目の表でに変更isInitialLoadTable1してください[そして、 :-)initialLoadTable2の終了中括弧の後のコンマを忘れないでください]fnServerParams

トリッキーなことに...コールバックで次のように呼び出しの設定をfnServerData変更します。url$.ajax

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

繰り返しになりますが、2番目のdataTableについては、このステートメントの1と2の両方を必ず変更してください。

最後に、クリックイベントを次のように変更します。

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

今、私はこれをテストしていませんが、実際のテストはあなたのコードとあなたのデータにあります。

うまくいけば、これで問題が解決します。

Answer 2

1つの考えは、2つの異なるテーブルでfnReloadAjaxを連続して呼び出すと、dataTable 1の読み込みが完了するのを待った場合には発生しない、dataTable2の競合が発生する可能性があるということです。

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');
};

私はこれをテストしていないので、それが機能するかどうかはわかりません。

しかし、自分の問題の解決策を探しているときにこの質問を見て、このアイデアを提供したいと思いました。お役に立てれば。

Answer 3

正常に動作することを示す例をまとめました：http：//live.datatables.net/aqazek/edit#javascript,html。fnReloadAjaxに小さな調整を加えたので、静的データソースに対するリロードの影響を確認できます（カウンターでセルの1つを書き換えるだけです）が、それ以外は、DataTablesサイトからの変更はありません。

ですから、それが機能しない例を見る必要があるので、さらに支援を提供すると思います。

Answer 4

この特定の問題の解決策は、dataTableObjects.currentPortfolioTableに返されるデータに、DataTableがデータのページ付けに使用する値sEcho、つまりデータのページが含まれていることでした。sEchoは、サーバー側データを使用したDataTablesの使用例で確認できます。

dataTableObjects.currentPortfolioTableのsEcho値は常にに設定されていたため1、DataTablesは、データがまだ元のデータセットであり、新しいデータではないと常に見なしていました。新しいデータのAJAXリクエストで返される値にsEchoをインクリメントすると、問題が修正されました。