具有更新的ajax查询的Datatables.Net重绘表

Question

我目前有一个数据表，其中的数据源约为120万行。

尝试在服务器端加载时通过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）不会每次都重新生成，请使用reload方法

var dtTable = drawCDRTable();

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

我还没有尝试过，但是我认为如果不使用reload函数，答案就可以了：D