18

サーバー側のデータで datatables プラグインを使用しており、AJAX を使用してテーブルを更新しています。

私のdataTablesセットアップは次のようになります：

tblOrders = parameters.table.dataTable( {
    "sDom": '<"S"f>t<"E"lp>',
    "sAjaxSource": "../file.cfc",
    "bServerSide": true,
    "sPaginationType": "full_numbers",  
    "bPaginate": true,
    "bRetrieve": true,
    "bLengthChange": false,         
    "bAutoWidth": false,
    "aaSorting": [[ 10, "desc" ]],      
    "aoColumns": [                      
        ... columns 
                  ],
    "fnInitComplete": function(oSettings, json) {
        // trying to listen for updates
        $(window).on('repaint_orders', function(){
            $('.tbl_orders').fnServerData( sSource, aoData, fnCallback, oSettings );
            });
        },
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
        var page = $(oSettings.nTable).closest('div:jqmData(wrapper="true")')
        aoData.push(
            { "name": "returnformat", "value": "plain"},
            { "name": "s_status", "value": page.find('input[name="s_status"]').val() },
            { "name": "s_bestellnr", "value": page.find('input[name="s_bestellnr"]').val() },
            { "name": "form_submitted", "value": "dynaTable" }
            );
        $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData , "success": fnCallback });
        }

サーバー側のデータをフィルタリングするためのカスタム フィールドがいくつかあります。これを AJAX リクエストと一緒にプッシュしています。問題は、テーブルの外部から JSON リクエストをトリガーする方法がわからないことです。ユーザーがフィルターに入力すると、fnServerData が起動し、テーブルが更新されます。ただし、ユーザーがテーブルの外にあるコントロールを選択した場合、fnServerData関数をトリガーする方法がわかりません。

現在、fnInitComplete で発火してリッスンしているカスタム イベントを試しています。ユーザーがカスタム フィルター条件を選択していることは検出できますが、fnServerData が正しくトリガーされるために必要なすべてのパラメーターが不足しています。

質問:
実際の dataTables テーブルの外にあるボタンから fnServerData をトリガーする方法はありますか?

フィルターにスペースを追加することもできると思いますが、これは実際にはオプションではありません。

ご意見ありがとうございます。

質問

4

7 に答える 7

18

ここでの議論から、Allan (DataTables 担当者) は、単純に fnDraw を呼び出すだけで、探している結果が得られることを示唆しています。これは、サーバー側のものを (重要な fnServerData 経由で) リロードするために使用する方法であり、これまでのところ機能しています。

$("#userFilter").on("change", function() {
    oTable.fnDraw();  // In your case this would be 'tblOrders.fnDraw();'
});
于 2013-04-17T05:24:28.217 に答える
11

私はこのスクリプトを少し前に見つけました (そのため、どこから来たのか覚えていません :( および誰の功績でしょうか :'( ) しかし、ここでは

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
    if (typeof sNewSource != 'undefined' && sNewSource != null) {
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay(oSettings, true);
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];

    this.oApi._fnServerParams(oSettings, aData);

    oSettings.fnServerData(oSettings.sAjaxSource, aData, function (json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable(oSettings);

        /* Got the data - add it to the table */
        var aData = (oSettings.sAjaxDataProp !== "") ?
            that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;

        for (var i = 0; i < aData.length; i++) {
            that.oApi._fnAddData(oSettings, aData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw();

        if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) {
            oSettings._iDisplayStart = iStart;
            that.fnDraw(false);
        }

        that.oApi._fnProcessingDisplay(oSettings, false);

        /* Callback user function - for event handlers etc */
        if (typeof fnCallback == 'function' && fnCallback != null) {
            fnCallback(oSettings);
        }
    }, oSettings);
}

データテーブル初期化関数を呼び出す前に追加してください。次に、次のようにリロードを呼び出すことができます。

$("#userFilter").on("change", function () {
        oTable.fnReloadAjax(); // In your case this would be 'tblOrders.fnReloadAjax();'
    });

userFilterはドロップダウンの ID であるため、変更されるとテーブルのデータがリロードされます。これは例として追加しただけですが、任意のイベントでトリガーできます。

于 2012-07-19T18:07:47.817 に答える
4

前述のすべてのソリューションには問題があります (たとえば、追加のユーザー http パラメーターが投稿されていない、または古いなど)。そこで、うまく機能する次のソリューションを思いつきました。

拡張機能 (私のパラメーターはキーと値のペアの配列です)

<pre>
$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, myParams ) {
if ( oSettings.oFeatures.bServerSide ) {
    oSettings.aoServerParams = [];
    oSettings.aoServerParams.push({"sName": "user",
        "fn": function (aoData) {
            for (var i=0;i<myParams.length;i++){
            aoData.push( {"name" : myParams[i][0], "value" : myParams[i][1]});
         }
     }});
     this.fnClearTable(oSettings);
     this.fnDraw();
     return;
    }
};
</pre>

リフレッシュイベントリスナーに入れる使用例。

<pre>
oTable.fnReloadAjax(oTable.oSettings, supplier, val);
</pre>

注意すべきことは1つだけです。テーブルを作成したら再描画しないでください。時間がかかるためです。したがって、必ず最初にのみ描画してください。それ以外の場合は、リロードします

<pre>
var oTable;
if (oTable == null) {
    oTable = $(".items").dataTable(/* your inti stuff here */); {
}else{
    oTable.fnReloadAjax(oTable.oSettings, supplier, val);
}
</pre>
于 2012-11-08T10:42:05.943 に答える
1

初期化で次を使用します。

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    //* Add some extra data to the sender *
                    newData = aoData;
                    newData.push({ "name": "key", "value": $('#value').val() });

                    $.getJSON( sSource, newData, function (json) {
                        //* Do whatever additional processing you want on the callback, then tell DataTables *
                        fnCallback(json);
                    } );
                },

そして、次を使用します。

$("#table_id").dataTable().fnDraw();

fnServerData で重要なことは次のとおりです。

    newData = aoData;
    newData.push({ "name": "key", "value": $('#value').val() });

aoData に直接プッシュすると、最初は変更が永続的になり、テーブルを再度描画すると、fnDraw が思い通りに動作しません。したがって、aoData のコピーを使用してデータを ajax にプッシュします。

于 2013-08-05T20:29:27.843 に答える
0

データをリロードするには、jquery セレクターと関数を使用して DataTable を選択し、DataTable()関数を呼び出すだけ_fnAjaxUpdateです。

次に例を示します。

$('#exampleDataTable').DataTable()._fnAjaxUpdate();
于 2017-02-01T13:38:13.523 に答える