Question

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

我正在使用＆＃39; ajax＆＃39;检索DataTable数据的选项。

我在＆＃39; 渲染＆＃39;中添加了一个小型的console.log（renderCount）。功能

表格中有4,921行。

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

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

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

还有什么 - 我有＆＃39; deferRender ＆＃39;选项集 - 所以我认为渲染函数应该只被调用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中，您需要在服务器上自行实施排序，分页和过滤。

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

1 个答案: