爲什麼DataTables渲染功能被稱爲3次？

我正在使用DataTables 1.10.9和客戶端處理。爲什麼DataTables渲染功能被稱爲3次？

我正在使用'ajax'選項來檢索DataTable的數據。

我在'render'函數中放了一個小的console.log（renderCount）。

表中有4,921行。

但是，控制檯顯示渲染函數總共被調用了14,772次！

（14772 =行×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" 
}

下面是表的定義代碼：由render選項定義

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"); 
     } 
    } 
});

來源

2016-02-04 JTech

功能確實被多次調用，由於採用返回jQuery的數據表價值爲多重目的。

從manual：

注意，此函數可能被多次調用，如數據表會調用它，它需要不同的數據類型 - 排序，篩選和顯示。

您可以根據提供的type參數爲不同的操作返回不同的值。如果您希望顯示一個值並將另一個值用於排序，則可能需要這樣做。例如，這對包含日期的字段很有幫助。

您可以通過在客戶端處理模式下使用deferRender或切換到server-side processing mode來提高性能。請注意，在server-side processing mode中，您需要在服務器上自行執行排序，分頁和過濾。

來源

2016-02-05 00:46:36

感謝您的解釋重新：**渲染**功能。手冊中引用的「數據類型」究竟是什麼意思？我想這不是'int'vs'string'，而是更像'數據使用率'=>，如'使用列值的這種表示來排序'和'使用這個其他值來顯示'？ – JTech

在我的問題 - 我說我已經使用'deferRender'選項。任何其他建議（除了服務器端處理）都可以提高性能？ – JTech

@JTech，jQuery DataTables請求將用於排序，搜索和顯示的不同值。你可以選擇使用三個不同的值，這就解釋了爲什麼'render'被多次調用。 –

爲什麼DataTables渲染功能被稱爲3次？

回答

相關問題