为什么 DataTables 渲染函数被调用了 3 次？

Question

我正在使用带有客户端处理的 DataTables 1.10.9。

我正在使用“ajax”选项来检索 DataTable 的数据。

我在'render'函数中放了一个小的console.log(renderCount)。

表中有 4,921 行。

但是，控制台显示渲染函数总共被调用了 14,772 次！

(14,772 = 行数 * 3 + 11)

我相信这会减慢渲染过程。

更重要的是 - 我设置了 'deferRender' 选项 - 所以我认为渲染函数应该只被调用 10 次，这是默认页面大小。

怎么了？

除了服务器端处理 - 如何提高此表的初始渲染性能？？？

以下是一行数据的示例：

{ 
    Id: 1, 
    Type: "Purchases", 
    LifecycleStatus: "Manual", 
    ReceivedAtLocal: "04/02/2016 20:45:16", 
    ModifiedAtLocal: "04/02/2016 21:45:16", 
    Operator: "a-mjohn", 
    PartNumber: "IXAWGCAUNVJHONP" 
}

表定义代码如下：

    var renderCount = 0;
    transactionTable = $("#tblTransactions").DataTable({
        "searchDelay" : 500,
        "bDestroy": true,
        "ajax": window.getTransactionDataUrl,
        "processing": false,
        "deferRender" : true,
        "columns": [
            {
                'render': function (data, type, full, meta){                        
                    // Other code omitted for brevity
                    renderCount++;
                    console.log(renderCount);
                    return "";
                },
                "bSortable": false
            },
            {
            'render': function (data, type, full, meta) {
                return '<input type="checkbox">';
            },
            "bSortable": false
        },
        { "data": "Id" },
        { "data": "Type" },
        { "data": "LifecycleStatus" },
        { "data": "Operator" },
        { "data": "PartNumber" },
        { "data": "ReceivedAtLocal" },
        { "data": "ModifiedAtLocal" },
        { "defaultContent": "<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#detailsModal'>Details</button>", "bSortable": false },
        { "defaultContent": "<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#auditModal'>Audit</button>", "bSortable": false },
        { "defaultContent": "<button class='btn btn-primary btn-xs' data-toggle='modal' data-target='#commentModal'>Comments</button>", "bSortable": false }
    ],
    "rowId": "Id",
    'order': [[7, "asc"]],
    'rowCallback': function (row, data, dataIndex) {
        // Get row ID
        var rowId = data["Id"];

        if ($.inArray(rowId, window.transIndexPage.rows_selected) !== -1) {
            $(row).find('input[type="checkbox"]').prop("checked", true);
            $(row).addClass("selected");
        }
    }
});

Answer 1

render 选项定义的函数确实被多次调用，因为 jQuery DataTables 将返回值用于多种用途。

来自manual：

请注意，此函数可能会被多次调用，因为 DataTables 会针对它需要的不同数据类型调用它 - 排序、过滤和显示。

您可以根据提供的type 参数为不同的操作返回不同的值。如果您希望显示一个值而另一个用于排序，则可能需要这样做。例如，这对包含日期的字段很有帮助。

您可以通过在客户端处理模式下使用deferRender 或切换到server-side processing mode 来提高性能。请注意在server-side processing mode中，您需要自己在服务器上实现排序、分页和过滤。