当我点击按钮时,如何通过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,因此当它更改时,它会重新加载表的数据.我刚刚添加了这个作为示例,但您可以在任何事件上触发它.