Performance issue - Datatable renders very slowly (more than 30s) for 2k-3k records

Sowmyashree

Hi,
I am using datatable as below :

$("#dataTableID").DataTable({
                                    "ajax":"data/objects.txt",
                                    "columns":columns,  
                                    "aoColumnDefs":column_format,
                                    "aaSorting": aaSort,
                                    "bDestroy": true,
                                    "bDeferRender": true,
                                    "orderClasses": false,
                                    "bSortClasses": false,
                                    "iDisplayLength" : 25,
                                    "aLengthMenu":lengthMenu,
                                    "sDom": "<'dt-toolbar'W<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'+lengthValue+ "TC>rR>"+
                                               "t\"+
                                               "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'" . $PaginationValue . ">>\",
                                    "oTableTools": {
                                        "aButtons": [
                                            {
                                                "sExtends": "xls",
                                                "sTitle": report_title
                                            },
                                            {
                                                "sExtends": "select",
                                                "sButtonText": "Reset Filter",
                                                "fnClick": function () {
                                                        $("#header").addClass('widget-body-ajax-loading');
                                                        var len = $('.filter-term').length;
                                                        $('.filter-term').each(function(index, element){
                                                            $(this).trigger('click');
                                                            if (index == len - 1) {
                                                              console.log('removing loading class');
                                                              setTimeout(function() {
                                                                $("#header").removeClass('widget-body-ajax-loading');
                                                              },0);
                                                            }
                                                        });
                                                }

                                            }
                                        ],
                                        "sSwfPath": "js/plugin/datatables/swf/copy_csv_xls_pdf.swf"
                                    },
                                    "initComplete": function () {
                                            var that = this;
                                            var widgets = $('.column-filter-widgets').children();
                                            this.api().columns().every( function () {
                                                var column = this;
                                                var widget = widgets.eq(column.index());
                                                $(widget).appendTo( $(column.header()).empty() );
                                                var id = "logSheet";
                                                var exists = new RegExp(id+"$").test(report_title);
                                                if(qs && (exists) {
                                                    var key,val=qs;
                                                    for(key in val) { 
                                                        if($(column.header(true)).text() == k) {
                                                            var matchingValue = $(widget).find('select').find('option').filter(function () { 
                                                                return this.value.toLowerCase() == val[key].toLowerCase();
                                                            }).attr('value');   
                                                            if(typeof(matchingValue) == 'undefined') {
                                                                $(widget).find('select').val(val[key]);
                                                            } else {
                                                                $(widget).find('select').val(matchingValue);
                                                            }
                                                            
                                                            $(widget).find('select').data('v',val[key]);
                                                            $(widget).find('select').trigger('change');
                                                        }
                                                    }
                                                }
                                           });
                                           $('.column-filter-widgets').remove();
                                        },
                                        "oColumnFilterWidgets": {
                                            "iMaxSelections": 1
                                        },
                                        "stateSave": true,
                                        "stateSaveParams": function(settings, data){
                                            delete data.search;
                                            delete data.order;
                                            var found = false;
                                            for (var i = 0;i < data.columns.length; i++){
                                              delete data.columns[i].search;
                                              if(!data.columns[i].visible) {
                                                  found = true;
                                              }
                                            }
                                            if(found) {
                                                if($('#green_check_btn').length) { return false; }
                                                $('.ColVis_Button').append("&nbsp;<img id='green_check_btn' src='img/green_check.png' style='height:10px;' >");
                                            } else {
                                                $('#green_check_btn').remove();
                                            }
                                        },
                                        "fnDrawCallback":function(settings){
                                            if(settings.aiDisplay.length <= 25) {
                                                $('.dataTables_length').css('display','none');
                                                $('.dataTables_paginate').css('display','none');
                                            } else {
                                                $('.dataTables_length').css('display','block');
                                                $('.dataTables_paginate').css('display','block');
                                            }
                                        },
                                        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                                           //Logic here to add comma format to td values
                                        }
                                });

It is taking more time to render 2k-3k records (more than 30s). What is wrong in my code? any suggestion would be helpful.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

If you link to a test page showing the issue I'd be happy to take a look and performance profile it.

Allan