JQuery - Datatables - FixedColumns

Question

Я разработал JSP-страницу с использованием плагинов JQuery, Datatables и FixedColumns.Мне нужна таблица данных на моей странице, с фиксированными первыми 4 столбцами и с возможностью перемещения всех остальных столбцов.

Чтобы загрузить простую страницу jsp из 80 строк * 133 столбца с датой, в 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. Я написал блог об этом. Медленный рендеринг с большими таблицами в IE

Answer 2

Есть несколько способов ускорения FixedColumns и DataTables. Основной с помощью FixedColumns - установить высоту строк в таблице на указанную высоту в CSS и отключить автоматическое определение высоты строки в FixedColumns: http://datatables.net/release-datatables/extras/FixedColumns/css_size.html.

Поскольку вы уже используете серверную обработку для DataTable, такие опции, как отложенный рендеринг, не помогут, но вы можете отключить классы сортировки (bSortClasses) для немного большей скорости, хотя с таким небольшим количеством строк буду удивлен, если это будет иметь значение.

Учитывая вашу инициализацию, DataTables будет рисовать только 10 строк за раз - 1 минута, чтобы нарисовать это удивительно медленно. Если вы можете дать ссылку на страницу, это будет полезно.