JQuery - Datatables - FixedColumns

Question

I developed a JSP page using JQuery, Datatables and FixedColumns plugins. I need a datatable in my page, with first 4 columns fixed, and all other columns movable.

To load a simple jsp page of 80 rows * 133 columns datatable, it took 1 min and 1 sec in IE 8, whereas it took few seconds in firefox and chrome(though it has alignment issues).

And my js code looks like this:

$(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"});});

Only after adding sScrollX,sScrollY,sScrollXInner, the page started slowing down in IE 8. Also without that, FixedColumns doesnt work.

I used jquery-1.6.1.js, jquery.datatables 1.8, and jquery Fixedcolumns 2.0. Any help would be appreciated for improving the performance with jquery + datatables + FixedColumns.

Thanks

Chris Love · Accepted Answer · 2011-06-10 11:43:40Z

1

I ran into this about a year ago. It comes down to the way IE renders innerHTML. DataTables relies heavily on the innerHTML call. I wrote a blog about it. Slow Rendering with Large Tables in IE

answered Jun 10, 2011 at 11:43

Chris Love

3,9031 gold badge22 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Allan Over a year ago

Very interesting post! Are you aware of any better way of getting the HTML into the table cells? There are new options in 1.8 for deferred rendering, but I don't think that will help in the case Vidhya described due to the use of server-side processing.

Allan · Accepted Answer · 2011-06-10 17:58:05Z

0

There are a number ways in which FixedColumns and DataTables can be sped up. The primary one with FixedColumns is to set the height of the rows in the table to a specified height in CSS, and disable the auto row-height detection in FixedColumns: http://datatables.net/release-datatables/extras/FixedColumns/css_size.html .

Since you are already using server-side processing for the DataTable, options such as deferred rendering won't help, but you could disable the sorting classes (bSortClasses) for a little extra speed, although with so few rows, I'd be surprised if this makes any difference.

Given your initialisation, DataTables will only be drawing 10 rows at a time - 1 minute to draw that is amazingly slow. If you can give a link to the page, that would be helpful.

answered Jun 10, 2011 at 17:58

Allan

2191 silver badge2 bronze badges

1 Comment

Vidhya Vinodh Over a year ago

I tried adding height in css and gave "sHeightMatch" :"none", but this took even greater time to load. Also, i tried the one given by dennis in the below link, still it took the same time to load. stackoverflow.com/questions/2406192/…

Collectives™ on Stack Overflow

JQuery - Datatables - FixedColumns

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related