Как я могу запускать jquery datatables fnServerData для обновления таблицы через AJAX, когда я нажимаю кнопку?

Ответ 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();