当我单击一个按钮时，如何通过AJAX触发jquery datatables fnServerData来更新表？
我将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？
我想我可以尝试在过滤器中添加一个空格，但这不是一个真正的选择。
感谢您的投入！
问题
回答 7
Stack Overflow用户
发布于 2012-07-20 02:07:48
我在一段时间前发现了这个脚本(所以我不记得它是从哪里来的了:(以及谁的功劳:'( )，但这里：
$.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);
}在调用datatable初始化函数之前添加它。然后，您可以像这样调用reload：
$("#userFilter").on("change", function () {
oTable.fnReloadAjax(); // In your case this would be 'tblOrders.fnReloadAjax();'
});userFilter是下拉列表的ID，因此当它发生更改时，它会重新装载表的数据。我只是添加了一个示例，但您可以在任何事件上触发它。
Stack Overflow用户
发布于 2013-04-17 13:24:28
在一次讨论here中，Allan ( DataTables专家)建议，简单地调用fnDraw就可以得到您想要的结果。这是我用来重新加载服务器端内容的方法(通过fnServerData，这一点很重要)，到目前为止它是有效的。
$("#userFilter").on("change", function() {
oTable.fnDraw(); // In your case this would be 'tblOrders.fnDraw();'
});Stack Overflow用户
发布于 2012-11-08 18:42:06
前面提到的所有解决方案都存在一些问题(例如，附加的用户http参数未发布或已过时)。所以我想出了下面的解决方案，效果很好。
扩展函数(My params是键值对数组)
<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>https://stackoverflow.com/questions/11566463
复制相似问题