我是如何引发的jQuery数据表fnServerData通过AJAX更新表,当我点击一个按钮? [英] how can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?
问题描述
我使用的数据表插件与服务器端数据,并正在使用AJAX更新表。
I'm using the datatables plugin with server-side data and am updating the table using AJAX.
我的数据表设置是这样的:
My dataTables setup looks like this:
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 STRONG>的功能。
现在我想用一个自定义事件我在射击和听的fnInitComplete。虽然我可以检测到用户选择一个自定义过滤标准,我错过正确触发所需的fnServerData所有参数。
Right now I'm trying with a custom event I'm firing and listening to in fnInitComplete. While I can detect the user picking a custom filtering criteria, I'm missing all parameters needed for fnServerData to trigger correctly.
问题:
有没有办法从一个按钮触发fnServerData实际数据表的表外?
Question:
Is there a way to trigger fnServerData from a button outside of the actual dataTables table?
我想我可以尝试将空间添加到过滤器,但是这不是一个真正的选择。
I guess I could try to add a space to the filter, but this is not really an option.
感谢您的输入!
问题
推荐答案
我发现这个脚本前一段时间(所以我不记得它是从哪里来的:(,谁给它的信用:(),但在这里:
I found this script some time ago (so I don't remember where it came from :( and who to credit for it :'( ) but here :
$.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的初始化函数。那么你可以调用重载是这样的:
Add that BEFORE you call the datatable initialization function. then you can just call the reload like this:
$("#userFilter").on("change", function () {
oTable.fnReloadAjax(); // In your case this would be 'tblOrders.fnReloadAjax();'
});
userFilter
是一个下拉的ID,所以当它改变时,重新加载数据表。我只是说这是一个例子,但你可以触发它的任何事件。
userFilter
is an ID for a dropdown, so when it changes, it reloads the data for the table. I just added this as an example but you can trigger it on any event.
这篇关于我是如何引发的jQuery数据表fnServerData通过AJAX更新表,当我点击一个按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!