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

Posted 2023-05-07

【中文标题】单击按钮时，如何触发 jquery datatables fnServerData 通过 AJAX 更新表？

【英文标题】：how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?

【发布时间】：2012-07-18 23:16:09

【问题描述】：

我正在使用带有服务器端数据的数据表插件，并正在使用 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？

我想我可以尝试在过滤器中添加一个空格，但这不是一个真正的选择。

感谢您的意见！

问题

【参考方案1】：

从here 的讨论中，Allan（DataTables 专家）建议简单地调用 fnDraw 将产生您正在寻找的结果。这是我用来重新加载服务器端内容的方法（通过 fnServerData，这很重要），到目前为止它已经奏效了。

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

【参考方案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);

添加 BEFORE 您调用数据表初始化函数。那么你可以像这样调用重新加载：

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

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

【讨论】：

@frequent 似乎您正在使用非常标准的初始化，所以它应该开箱即用。

我正在尝试让 fnReloadAjax 工作，但无法理解在方法调用中不传递任何参数时如何使其工作？定义有4个参数，不重要吗？

【参考方案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>

【讨论】：

感谢发帖。我会看看这是否能让事情变得容易一些。

【参考方案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。

【参考方案5】：

我知道这对游戏来说已经很晚了，但 fnDraw（来自 this answer above - 这应该是公认的答案）自 v1.10 起已被弃用

新方法是：

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.

【参考方案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);

【参考方案7】：

要重新加载数据，只需使用带有DataTable() 函数的jquery 选择器选择DataTable 并调用_fnAjaxUpdate 函数。

示例如下：

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