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分钟，这非常慢。如果您可以提供该页面的链接，那将会很有帮助。

JQuery - Datatables - FixedColumns

2 个答案: