JQuery - 数据表 - FixedColumns

Question

我使用 JQuery、Datatables 和 FixedColumns 插件开发了 JSP 页面。 我需要在我的页面中有一个数据表，前 4 列是固定的，所有其他列都是可移动的。

要加载 80 行 * 133 列数据表的简单 jsp 页面，在 IE 8 中需要 1 分 1 秒，而在 firefox 和 chrome 中需要几秒钟（尽管它有 Z5A159214D1469FDAFF70 问题）。

我的 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 提高性能的任何帮助，我们将不胜感激。

谢谢

Answer 1

大约一年前我遇到了这个问题。 它归结为 IE 呈现 innerHTML 的方式。 DataTables 严重依赖于 innerHTML 调用。 我写了一篇关于它的博客。 在 IE 中使用大表渲染缓慢

Answer 2

有多种方法可以加快 FixedColumns 和 DataTables 的速度。 FixedColumns的第一个是在CSS中将表中的行高设置为指定的高度，并在FixedColumns中禁用自动行高检测：http://datatables.net/release-datatables/extras/FixedColumns/ css_size.html 。

由于您已经在对 DataTable 使用服务器端处理，因此延迟渲染等选项将无济于事，但您可以禁用排序类 (bSortClasses) 以提高速度，尽管行数如此之少，我会感到惊讶如果这有什么不同。

鉴于您的初始化，DataTables 一次只能绘制 10 行 - 绘制速度非常慢 1 分钟。 如果您可以提供指向该页面的链接，那将很有帮助。