Javascript 单击按钮时，如何触发jquery datatables fnServerData通过AJAX更新表？

我将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 });
        }

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

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

"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);
                    } );
                },

tblOrders=parameters.table.dataTable（{
“sDom”：“t”，
“sAjaxSource”：“./file.cfc”，
“bServerSide”：正确，
“sPaginationType”：“完整编号”，
“bPaginate”：对，
“bRetrieve”：没错，
“bLengthChange”：false，
“bAutoWidth”：假，
“aaSorting”：[[10，“desc”]，
“列”：[
…专栏
],
“fnInitComplete”：函数（oSettings，json）{
//正在尝试侦听更新
$（窗口）.on（'repaint_orders'，function（）{
$（'.tbl_orders'）.fnServerData（sSource、aoData、fnCallback、oSettings）；
});
},
“fnServerData”：函数（sSource、aoData、fnServerData回调、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功能

现在，我正在尝试使用FNINTIMPLETE中触发和侦听的自定义事件。虽然我可以检测到用户选择自定义筛选条件，但我缺少fnServerData正确触发所需的所有参数

问题：
有没有办法从实际dataTables表之外的按钮触发fnServerData

我想我可以尝试向过滤器添加一个空间，但这不是一个真正的选项

谢谢你的意见

---

问题

我不久前发现了这个脚本（所以我不记得它是从哪里来的：（以及应该归功于谁：'）（）但这里：

$.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

是下拉列表的ID，因此当它更改时，它会重新加载表的数据。我只是添加了这个示例，但您可以在任何事件中触发它。

前面提到的所有解决方案都有一些问题（例如，附加的用户http参数未发布或过时）.所以我想出了以下有效的解决方案

扩展函数（我的参数是键值对数组）

$.fn.dataTableExt.oApi.fnReloadAjax=函数（oSettings、sNewSource、myParams）{
if（oSettings.oFeatures.bServerSide）{
oSettings.aoServerParams=[]；
oSettings.aoServerParams.push（{“sName”：“user”，
“fn”：功能（aoData）{
对于（var i=0；i，在一次讨论中，Allan（DataTables的家伙）建议，只需调用fnDraw就可以得到您想要的结果。这是我用于重新加载服务器端内容的方法（通过fnServerData，这很重要），到目前为止，它已经奏效了

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

在初始化过程中，请使用：

$.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);

然后使用：

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

fnServerData中的重要内容是：

// 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.

如果直接推送到aoData，第一次更改是永久性的，当您再次绘制表时，fnDraw无法按您希望的方式工作。因此，使用aoData的副本将数据推送到ajax。
类似于Mitja Gustin answer。更改了循环，添加了sNewSource

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

我知道这已经晚了，但是从v1.10开始就不推荐使用
fnDraw
（from-应该是公认的答案）

新方法是：

顺便说一句，它的评论是：

要重新加载数据，只需使用jquery选择器和
DataTable（）
函数选择DataTable，然后调用
\u fnAjaxUpdate
函数

下面是一个例子：

@频繁似乎您正在使用一个相当标准的初始化，因此它应该可以开箱即用。我正在尝试让fnReloadAjax工作，但无法理解当您在方法调用中不传递任何参数时，它是如何工作的？定义有4个参数，它们不重要吗？谢谢发布。我会看一看如果这能让事情变得容易一点。
this.api( true ).draw( true );

// 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.

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