DataTables slow on IE

zhuning

Hi, I have a table rendering with Datatables takes 20+ seconds on IE (version 9 and 11), however it only takes 2 seonds on Chrome. The data size of the table is 3k. Anybody knows what is the issue? Thanks very much.
Following is my code:

xxxTable = $("#xxxTable").DataTable({       
        ajax : "webapi/dsppriceadmin",
        paging : false,
        columns : [{
            data : null,
            render : function(data,type,row){
                return data.commCode+'/'+data.commGroup;
            },
            visible : false
        },{
            data : 'dspDate',
            render : function (val, type, row){
                return escapedString(val);
            }
        },{
            data : 'commCode',
            render : function (val, type, row){
                return escapedString(val);
            }
        },{
            data : 'year',
            render : function (val, type, row){
                return escapedString(val);
            }
        },{
            data : 'month',
            render : function (val, type, row){
                return escapedString(val);
            }
        },{
            data : 'dspType',
            render : function (val, type, row){
                return escapedString(val);
            }
        },{
            data : 'strike',
            render : function (val, type, row){
                return escapedString(val);
            }
        },{
            data : 'price',
            width : '10%',
            className : "editable"
        },
        {
            data: 'officer',
            visible : false
        },{
            data : 'lastModified',
            render : function (val, type, row){
                return formatDate(val);
            }
        },{
            data : 'percentageChange',
            render : function (val, type, row){
                return escapedString(val);
            }
        },{
            data : 'value',
            render : function (val, type, row){
                return escapedString(val);
            }
        },{
            data : 'priceFlag',
            render : function (val, type, row){
                switch (val) {
                case 4:
                case '4':
                    return '<spring:message code="datatables.label.dsppriceadmin.fail"/>';

                default:
                    return '<spring:message code="datatables.label.dsppriceadmin.pass"/>';
                }
            }
        },{
            data : 'action',
            visible : false
        }],
        tableTools : {
            sRowSelect : 'none',
            aButtons : [{
                sExtends : 'select',
                sButtonText : '<spring:message code="datatables.button.dsppriceadmin.submit.for.approval"/>',
                fnClick : function(){
                    if($("#xxxTable tbody tr .dataTables_empty").length == 0){
                        submitEditor
                            .title('<spring:message code="datatables.button.dsppriceadmin.submit.for.approval"/>')
                            .message('<spring:message code="datatables.message.dsppriceadmin.submit"/>')
                            .buttons({"label" : '<spring:message code="datatables.button.dsppriceadmin.submit"/>', "fn" : function(){ this.submit() }})
                            .edit(xxxTable.rows().nodes());
                    }
                    
                }
            }]
        }
    });

allan

Anybody knows what is the issue?

Answer your own question - you are using IE ;-)

The first thing I would suggest doing is adding the deferRender option - see the Speed FAQ.

Allan

zhuning

Hi allan,
Thanks for your answering.
I have tried the deferRender, it doesn't work. I got 2 questions here for the deferRender:
1) The requirement doesn't let us to do pagination, all 3k records need to be displayed in one page, does deferRender help in this case?
2) Previously, the DataTables is loaded by DOM, i.e. before line "ajax : "webapi/dsppriceadmin", there is one line: "dom : 'Tfrtip',". I removed that line, but it doesn't help also.
Btw, I have tried disable orderClasses with DOM options, it also doesn't work. It always takes about 20 seconds.
We are using version 1.10.7 for DataTables. Hope you can give some more suggestions. Thanks!

allan

1) No - not at all. deferRender will only help if you don't display all rows at once (since otherwise there is nothing to defer!).

2) The dom option doesn't relate to DOM loading data. DOM loading data is defined in the documentation.

basically, if you must display all 3k rows at once, there is very little I can offer in the way of help. You are running into performance limitations in the browser.

If you link to the page I'll profile it and see if there is anything obvious that will help (but frankly, I doubt it).

Allan

zhuning

Hi allan, Thanks for your reply.