當我點擊按鈕時，如何通過AJAX觸發jquery數據表fnServerData來更新表？

Question

我正在使用帶有服務器端數據的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？

我想我可以嘗試在過濾器中添加一個空格，但這不是一個真正的選擇。

感謝您的投入！

題

Answer 1

從這里的討論來看，Allan（DataTables家伙）建議簡單地調用fnDraw將產生你正在尋找的結果。 這是我用來重新加載服務器端東西的方法（通過fnServerData，這很重要），到目前為止它已經工作了。

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

Answer 2

我不久前找到了這個腳本（所以我不記得它來自哪里:(和誰相信它：'（）但是在這里：

$.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，因此當它更改時，它會重新加載表的數據。 我剛剛添加了這個作為示例，但您可以在任何事件上觸發它。

Answer 3

之前提到的所有解決方案都存在一些問題（例如，附加用戶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>

只需注意一件事。 不要重繪表，一旦它被創建，因為它耗費時間。 因此，請務必僅在第一時間繪制它。 否則，重新加載它

<pre>
var oTable;
if (oTable == null) {
    oTable = $(".items").dataTable(/* your inti stuff here */); {
}else{
    oTable.fnReloadAjax(oTable.oSettings, supplier, val);
}
</pre>

Answer 4

在初始化中使用：

"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。

Answer 5

我知道這是游戲的后期，但fnDraw （從上面這個答案 - 應該是接受的答案），從v1.10開始被棄用

新方法是：

this.api( true ).draw( true );

其中，BTW的評論如下：

// Note that this isn't an exact match to the old call to _fnDraw - it takes
// into account the new data, but can hold position.

Answer 6

類似於Mitja Gustin的回答。 更改了一個循環，添加了sNewSource。

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, myParams ) {
    if(oSettings.oFeatures.bServerSide) {
        if ( typeof sNewSource != 'undefined' && sNewSource != null ) {
            oSettings.sAjaxSource = sNewSource;
        }
        oSettings.aoServerParams = [];
        oSettings.aoServerParams.push({"sName": "user",
            "fn": function (aoData) {
                for(var index in myParams) {
                    aoData.push( { "name" : index, "value" : myParams[index] });
                }
            }
        });
        this.fnClearTable(oSettings);
        return;
    }
};

var myArray = {
    "key1": "value1",
    "key2": "value2"
};

var oTable = $("#myTable").dataTable();
oTable.fnReloadAjax(oTable.oSettings, myArray);

Answer 7

要重新加載數據，只需要使用帶有DataTable()函數的jquery選擇器選擇DataTable()並調用_fnAjaxUpdate函數。

這是一個例子：

$('#exampleDataTable').DataTable()._fnAjaxUpdate();