当我点击按钮时，如何触发jquery数据表fnServerData通过AJAX更新表？

我正在使用带有服务器端数据的datatables插件，并使用AJAX更新表。

我的dataTables设置如下所示：

tblOrders = parameters.table.dataTable( { "sDom": 't', "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请求。 如果用户键入filter，fnServerData将触发并更新表。 但是，如果用户在表外选择一个控件，我不知道如何触发fnServerData函数。

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

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

我想我可以尝试为filter添加一个空格，但这不是一个真正的选择。

感谢您的投入！

题

Answer 1

我不久前找到了这个脚本（所以我不记得它来自哪里:(和谁相信它：’（）但是在这里：

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

从这里的讨论来看，Allan（DataTables家伙）建议简单地调用fnDraw将产生你正在寻找的结果。 这是我用来重新加载服务器端东西的方法（通过fnServerData，这很重要），到目前为止它已经工作了。

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

Answer 3

之前提到的所有解决方案都存在一些问题（例如，附加用户http参数未发布或过时）。 所以我提出了以下解决方案，效果很好。

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

 
 $.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
 
 放入刷新事件侦听器的示例用法。 
 
 oTable.fnReloadAjax(oTable.oSettings, supplier, val); 
 
 只需要注意一件事。 不要重绘表，一旦它被创建，因为它耗费时间。 因此，请务必仅在第一次绘制它。 否则，重新加载它 
 
 var oTable; if (oTable == null) { oTable = $(".items").dataTable(/* your inti stuff here */); { }else{ oTable.fnReloadAjax(oTable.oSettings, supplier, val); } 
 

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();