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

Question

我正在使用 DataTables 1.10.9，并进行客户端处理。

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

我在“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 :

Note that this function might be called multiple times, as DataTables will call it for the different data types that it needs - sorting, filtering and display.

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

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