Как я могу запускать jquery datatables fnServerData для обновления таблицы через AJAX, когда я нажимаю кнопку?
Я использую плагин 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 запускает и обновляет таблицу. Однако, если пользователь выбирает элемент управления за пределами таблицы, я не знаю, как вызвать функцию fnServerDatastrong > .
Сейчас я пытаюсь создать собственное событие, которое я запускаю и слушаю в fnInitComplete. Хотя я могу обнаружить, что пользователь выбирает пользовательский критерий фильтрации, мне не хватает всех параметров, необходимых для правильного запуска fnServerData.
Вопрос:
Есть ли способ вызвать fnServerData с помощью кнопки за пределами таблицы фактических данных?
Я думаю, я мог бы попытаться добавить пробел в фильтр, но это не вариант.
Спасибо за ввод!
Вопрос
Ответы
Ответ 1
Я нашел это script некоторое время назад (так что я не помню, откуда он пришел:( и кто за него кредитует: '(), но здесь:
$.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
- это идентификатор выпадающего списка, поэтому при его изменении он перезагружает данные для таблицы. Я просто добавил это в качестве примера, но вы можете вызвать его на любом событии.
Ответ 2
Из обсуждения здесь, Аллан (парень DataTables) предполагает, что просто вызов fnDraw даст результаты, которые вы ищете. Это метод, который я использую для перезагрузки серверных материалов (с помощью fnServerData, что важно), и он работал до сих пор.
$("#userFilter").on("change", function() {
oTable.fnDraw(); // In your case this would be 'tblOrders.fnDraw();'
});
Ответ 3
Все упомянутые выше решения имеют определенную проблему (например, дополнительные параметры http пользователя не публикуются или не устаревают). Поэтому я придумал следующее решение, которое хорошо работает.
Функция расширения (мои параметры - это массив пар значений ключа)
<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>
Ответ 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.
Ответ 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.
Ответ 6
Подобно Митьке Густину. Изменен цикл, добавлен 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);
Ответ 7
Для перезагрузки данных просто нужно выбрать DataTable с помощью селектора jquery с помощью функции DataTable()
и вызвать функцию _fnAjaxUpdate
.
Вот пример:
$('#exampleDataTable').DataTable()._fnAjaxUpdate();