我正在将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?
我想我可以尝试为过滤器添加一个空格,但这并不是一个选择。
感谢您的输入!
题
我前段时间找到了这个脚本(所以我不记得它来自:(和谁归功于它了:’(),但是在这里:
$.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,因此当它更改时,它将重新加载表的数据。我只是添加了此示例,但您可以在任何事件上触发它。
userFilter