JQuery - Datatables - FixedColumns

我使用JQuery，Datatables和FixedColumns插件開發了一個JSP頁面。我需要在我的頁面中有一個數據表，其中前4列固定，其他所有列可移動。要加載一個80行* 133列數據表的簡單jsp頁面，IE 8需要1分1秒，而Firefox和Chrome需要幾秒鐘（儘管它有對齊問題）。JQuery - Datatables - FixedColumns

而我的JS代碼如下所示：

$(document).ready(function() { 
      oTable = $('#example').dataTable({ 
    "sScrollX" :"100%", 
    "sScrol 

lY" :"500px", 
     "sScrollXInner" :"130%", 
     "bScrollCollapse" :false, 
     "bJQueryUI" :true, 
     "bAutoWidth" :false, 
     "fnDrawCallback" : function(oSettings) { 
     if (oSettings.bSorted || oSettings.bFiltered) { 
    for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) { 
    $('td:eq(0)',oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1); 
    } 
    } 
    "sPaginationType" :"full_numbers", 
    "bPaginate" :true,"bProcessing" :true,"bServerSide" :true,"aaSorting" : [ [ 1, 'asc' ] ],"sAjaxSource" :"./server_processing.jsp", 

"fnServerData" : function(sSource,aoData, fnCallback) {$.ajax({"dataType" :'json',"type" :"POST","url" :sSource, 
"data" :aoData,"success" :fnCallback});}); 
new FixedColumns(oTable, {"iLeftColumns" :4,"iLeftWidth" :450,"sHeightMatch" :"auto"});});

只有加入sScrollX，sScrollY，sScrollXInner後，頁面開始在IE 8也明顯放緩不說，FixedColumns不工作。

我用jquery-1.6.1.js，jquery.datatables 1.8和jquery Fixedcolumns 2.0。任何幫助將不勝感激用jQuery +數據表+ FixedColumns改善性能。

謝謝

來源

2011-06-10 Vidhya Vinodh

大約一年前我遇到過這個問題。這歸結於IE呈現innerHTML的方式。 DataTables嚴重依賴於innerHTML調用。我寫了一篇關於它的博客。 Slow Rendering with Large Tables in IE

來源

2011-06-10 11:43:40

非常有趣的帖子！你知道有什麼更好的方式讓HTML進入表格單元嗎？ 1.8中有新的選項用於延遲渲染，但我認爲這對Vidhya所描述的由於使用服務器端處理的情況不會有幫助。 – Allan 2011-06-10 17:59:54

FixedColumns和DataTables可以通過多種方式加速。具有FixedColumns的主要行爲是將表中的行高度設置爲CSS中的指定高度，並在FixedColumns：http://datatables.net/release-datatables/extras/FixedColumns/css_size.html中禁用自動行高度檢測。

由於您已經在使用DataTable的服務器端處理，所以諸如延遲渲染等選項將無濟於事，但您可以禁用排序類（bSortClasses）以獲得一點額外的速度，儘管行數很少，但我如果這有什麼區別，你會感到驚訝。

鑑於您的初始化，DataTables將一次只繪製10行--1分鐘繪製，速度非常慢。如果您可以提供該網頁的鏈接，那會很有幫助。

來源

2011-06-10 17:58:05 Allan

我試着在CSS中添加高度，並給出了「sHeightMatch」：「none」，但是這花了更多的時間來加載。另外，我在下面的鏈接中嘗試了由dennis給出的那個，仍然花了相同的時間加載。 http://stackoverflow.com/questions/2406192/how-to-speed-up-the-reading-of-innerhtml-in-ie8 – 2011-06-14 11:50:19

JQuery - Datatables - FixedColumns

回答

相關問題