Datatables. Net перерисовать таблицу с обновленным запросом ajax

Question

Сейчас у меня есть таблица данных с большим источником данных ~ 1,2 миллиона строк.

Попытка выполнить некоторую настраиваемую фильтрацию через фильтр ajax с загрузкой на стороне сервера. Текущая ошибка - таблица не может быть повторно активирована, и я понимаю, почему.

Есть ли способ обновить фильтр ajax, чтобы он имел обновленные значения из полей ввода, которые затем обновляют полезную нагрузку с этими фильтрами.

function drawCDRTable() {
    var endpoints = $("#endpoints").val();
    var dateselection = $("#dateSelection").val();
    var dates = $("#dates").val();
    var startdate = $("#startdate").val();
    var enddate = $("#enddate").val();

    $("#call-records").DataTable({
        // Design Assets
        scrollX: "100%",
        dom: "lBfrtip",
        lengthMenu: [
            [10, 25, 50, 100, -1],
            ['10 rows', '25 rows', '50 rows', '100 rows', 'Show all']
        ],
        stateSave: true,
        autoWidth: true,
        // ServerSide Setups
        processing: true,
        serverSide: true,
        // Paging Setups
        paging: true,
        // Searching Setups
        //searching: { regex: true },

        language:
        {
            processing: "<img height='60px' width='107px' src='images/loading-a.gif' />",
        },
        // Ajax Filter
        ajax: {
            url: "/CDR/LoadData",
            type: "POST",
            dataType: "json",
            data: { endpoints: endpoints, dateselection: dateselection, dates: dates, startdate: startdate, enddate: enddate }
        },
        // Columns Setups
        columns: [

            {
                data: "date_Time", render: function (data, type, row) {
                    // If display or filter data is requested, format the date
                    if (type === "display" || type === "filter") {
                        return moment(data).format("DD/MM/YYYY HH:mm:ss");
                    }
                    // Otherwise the data type requested (`type`) is type detection or
                    // sorting data, for which we want to use the raw date value, so just return
                    // that, unaltered
                    return data;
                }
            },
            { data: "call_Direction" },
            { data: "calling_Party" },
            { data: "calling_Digits" },
            { data: "called_Party" },
            { data: "called_Digits" },
            {
                data: "duration", render: function (data, type, row) {
                    // If display or filter data is requested, format the date
                    if (type === "display" || type === "filter") {
                        return moment(data).format("HH:mm:ss");
                    }
                    // Otherwise the data type requested (`type`) is type detection or
                    // sorting data, for which we want to use the raw date value, so just return
                    // that, unaltered
                    return data;
                }
            },
            {
                data: "cost", render: function (data, type, row) {
                    // If display or filter data is requested, format the date
                    if (type === "display" || type === "filter") {
                        return data.toFixed(2);
                    }
                    // Otherwise the data type requested (`type`) is type detection or
                    // sorting data, for which we want to use the raw date value, so just return
                    // that, unaltered
                    return data;
                }
            },
            { data: "reason" },
            { data: "outcome" },
            {
                data: "second_Ring_Time", render: function (data, type, row) {
                    // If display or filter data is requested, format the date
                    if (type === "display" || type === "filter") {
                        return moment(data).format("HH:mm:ss");
                    }
                    // Otherwise the data type requested (`type`) is type detection or
                    // sorting data, for which we want to use the raw date value, so just return
                    // that, unaltered
                    return data;
                }
            },
            { data: "category" }
        ],
        // Column Definitions
        columnDefs: [
            { targets: "no-sort", orderable: false },
            { targets: "no-search", searchable: false },
            {
                targets: "trim",
                render: function (data, type, full, meta) {
                    if (type === "display") {
                        data = strtrunc(data, 10);
                    }

                    return data;
                }
            },
            { targets: "date-type", type: "date-eu" }
        ],
        buttons: [
            {
                extend: "pdfHtml5",
                title: "Call Detail Records",
                orientation: "landscape",
                pageSize: "LEGAL",
                text: "<i class='fa fa-file-pdf-o'> PDF</i>",
                titleAttr: "PDF"
            },
            {
                extend: "excelHtml5",
                title: "Call Detail Records",
                text: "<i class='fa fa-file-excel-o'> Excel</i>",
                titleAttr: "Excel"
            }
        ]
    });

    $('.buttons-pdf').addClass('btn btn-outline-primary');
    $('.buttons-excel').addClass('btn btn-outline-primary');

}

drawCDRTable();

$('#btnFilter').click(function () {
    drawCDRTable();
});  

});

Answer 1

Вы можете попробовать это:

1) вместо передачи данных в ваш ajax передайте функцию, вместо этого она будет динамически оценивать значение

ajax: {
    url: "/CDR/LoadData",
    type: "POST",
    dataType: "json",
    data: function(){
        return {
          endpoints: $("#endpoints").val(),
        }
    },
}

2) сохранить копия таблицы

 return $("#call-records").DataTable({})

3) не регенерировать каждый раз, вместо этого используйте метод перезагрузки

var dtTable = drawCDRTable();

$('#btnFilter').click(function () {
    dtTable.ajax.reload()
});  

Я не пробовал, но думаю, что это сработает, если не задействовать функцию перезагрузки, ответ где-то есть: D