datatables slow rendering on all versions of IE (including IE 11)

jamieb22

I have a user reporting that Datatables is extremely slow on all versions of IE (including IE 11) yet on FF and Chrome is works like a champ. Any ideas on how to improve the performance in IE. Setup is described below:

        form.resultTable = $( form.searchResult ).dataTable({
            "fnStateLoadParams": function (oSettings, oData) {
                var json = ${resultsBean.tableState};
                if (json) {
                    oData.iDisplayStart =  json.iDisplayStart;
                    oData.aaSorting =  json.aaSorting;

                    return false;
                }   
                       
            },
            "bAutoWidth": false,
            "bFilter": false,
            "bServerSide": true,
            "sAjaxSource": "fetchtabledata.do?"+"instance=<c:out value="${resultsBean.instance}"/>",
            "bStateSave": true,
            "bDeferRender": true,
            "oScroller": {
                  "displayBuffer": 5,
                  "boundaryScale": 0.3
            },
            "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                var cells = $( nRow ).children( 'td' ),
                    ch = $( cells[0] ).text().split(":"),
                    vr = $( cells[1] );
                    at = $( cells[2] ); 
                    hl = $( cells[3] );
                    var usualCell = 1;
                    //add checkbox
                    $( cells[0] ).text("").html( $( '<input type="checkbox" index="'+ch[1]+'">' ).attr( "checked",  ( ch[0] == 1 ) ? true:false ));
                    //add attachment
                    if ( at.text() == 1) {
                        usualCell++;
                        at.html( '<span class="ui-button-icon-primary ui-icon ui-icon-additional ui-icon-attachment"></span>' );
                        /* 
                        at.html( "<span class=\"ui-button-icon-primary ui-icon ui-icon-disk\" alt=\"<bean:message key='alt.attach'/>\"</span>" + 
                                "<span class=\"ui-icon ui-button-icon-secondary ui-icon-additional ui-icon-bug\" alt=\"<bean:message key='alt.attach'/>\"</span>"); */
                    }

                    if ( vr.text() == 1) {
                        usualCell++;
                        vr.html( '<span class="ui-button-icon-secondary ui-icon ui-icon-additional ui-icon-bug"></span>' );
                    }
                    //add preserve
                    if (hl.text() == 1) {
                        usualCell++;
                        hl.html( "<span class=\"ui-button-icon-primary ui-icon ui-icon-pin-s\" alt=\"<bean:message key='alt.hold'/>\"</span>" )
                    }

                for ( var int = usualCell++, length = cells.length; int < length; int++) {
                    var cell = $( cells[int] ),
                        text = cell.text();
                    if( text.length > 0 ) {
                        cell.attr( 'title', text ).wrapInner( '<div class="xS"/><div class="xT"/><div class="y6"/>' );  
                    }

                }   
             },
            "bJQueryUI": true, 
            "bSort": true,
            "sDom": 'r<"H"i>t<"F">S',
            "sScrollY": searchResultsHeight,
            "aoColumnDefs": [
                             { "bVisible": false, "sWidth": "0%", "aTargets": [ 0 ] },
                             { "bSortable": false, "aTargets": [ 0, 1, 2, 3, 4 ] },
                             <logic:iterate id='field'  name="resultsBean" property="searchResultFields" indexId="fieldsIndex"> 
                                <c:if test="${field.columnSize!=-1}">
                                    { "sWidth": "${field.columnSize}%", "aTargets": [ ${fieldsIndex+2} ] },
                                </c:if>
                                <c:if test="${field.columnSize==-1}">
                                    { "aTargets": [ ${fieldsIndex+2} ] },
                                </c:if>
                             </logic:iterate>
                             { "sWidth": "3%", "aTargets": [ 1 ] }
                           ], 
            "fnInitComplete": function(oSettings, json) {
                $(form.form+' .dataTables_scrollBody').css('height', searchResultsHeight);
                  oSettings.oScroller.fnScrollToRow( oSettings._iDisplayStart );
            },
            "oLanguage": {
                "sEmptyTable": '<bean:message key="searchresults.no_info"/>',
                "sInfo": "[_START_ - _END_] _TOTAL_",
                "sProcessing": '<img src="<%=themeAddress%>/images/spinner.gif" alt="<bean:message key='alt.working'/>.."/>'
            },
            "bProcessing": true

        });

Skarv1

have the exact same issue on a large data set in IE 11, but the root of the evil seems to be in the ColumnFilterWidgets code. I've performed the trick from the following post, but it was not enough: http://datatables.net/forums/discussion/4739/beating-the-ie-dead-horse/p2

All others browsers behave load the page in less than 3 seconds, but in IE 11 this often amounts to between 50 and 120 seconds. The same page performs well in IE 9, so this is an IE 11-specific issue for me.

Skarv1

I came across a detail in the fnDraw section of the current columnFilterWidgets code that might make a slight difference for those who use the latest versions of DataTables. I proposed a subtle change, reported here:
https://github.com/cyberhobo/ColumnFilterWidgets/issues/36

allan

Hi,

I'm not the author of the ColumnFilterWidgets plug-in, so I can't comment much on that aspect, but you seem to be suggesting that the fnVersionCheck function is the slow part. Is that correct?

It should really be super fast compared to anything else, such as getting the data for a column.

Allan