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

Question

我正在使用具有客户端处理功能的DataTables 1.10.9。

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

我在“ render ”函数中放了一个小的console.log（renderCount）。

表中有4,921行。

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

（14,772 =行数* 3 + 11）

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

而且-我设置了' deferRender '选项-因此我以为render函数应该只调用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

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

从手册：

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

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

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