JQuery - 数据表 - FixedColumns

Question

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

要加载一个简单的 80 行 * 133 列数据表的 jsp 页面，在 IE 8 中需要 1 分 1 秒，而在 Firefox 和 chrome 中则需要几秒钟（尽管存在对齐问题）。

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

谢谢

Answer 1

大约一年前我遇到了这个问题。它归结为 IE 呈现 innerHTML 的方式。 DataTables 严重依赖innerHTML 调用。我写了一篇关于它的博客。 Slow Rendering with Large Tables in IE

Answer 2

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

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

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