Show/Hide Columns very slow when used for multiple columns

hyalkaf

Hi,

I have been going through different posts about this problem but I can't fix it. I can't share the tables as it's a confidential information and I also use ajax server side processing. Tried to use the debugger but can't get it to work as well. My problem is that the hide/show of multiple columns takes a heck lot of time to load. Here is some of my code:

var groups = [];
var exclude = [];
var columns = [];
var counter = 0;

        if (numberOfColumns > 9)
        {

            for (var i = 0; i < years.length; i++)
            {
                // Index of all months of different years
                columns = [12 * i + 5 + counter, 12 * i + 6 + counter,12 * i + 7 + counter,12 * i + 8 + counter,12 * i + 9 + counter,12 * i + 10 + counter,12 * i + 11 + counter,12 * i + 12 + counter,12 * i + 13 + counter,12 * i + 14 + counter,12 * i + 15 + counter,12 * i + 16 + counter, 12 * i + 17 + counter];

                // Push the group of year with months
                groups.push({title: parseInt(years[i]), columns: columns});

                // Exclude the years and months
                exclude.push(columns);

                // Counter for years
                counter++;

                // Add months of last year
                if (i === years.length - 1)
                {
                    for(var j = 0; j < months.length; j++)
                    {
                        groups.push({title: years[i] + " " + months[j], columns: [columns[j]] })
                    }
                }
            }
            exclude.push([0,1,2,3,4]);

        }

        var merged = [];
        var colVisOption = {exclude: merged.concat.apply(merged, exclude), groups: groups };

        var companyName;
        var repCodeName;
        var fundClass;
        var valueCompany;
        var valueRepCode;
        var companyPre;

        var table = $("#repAsset").DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": $.fn.dataTable.pipeline({"url": "RepAssetReport/AjaxHandler", "type": "POST", pages: 1}),
            "deferRender": true,
            "drawCallback": function( settings ) {
                alert( 'DataTables has redrawn the table' );
            },
            jQueryUI: true,
            //"sPaginationType": "full_numbers",
            "sScrollX" : "100%", //Scroll
            "sScrollY" : "800",
            //"autoWidth" : false,
            "bScrollCollapse" : true,
            "paging" : false,
            "bSort" : false,
            "sInfo" : "",
            "sInfoEmpty" : "",
            "bFilter": false,
            "bInfo": false,
            "sDom" : 'ZCT<"clear">lfrti',
            "tableTools":
                {
                    "aButtons": ["xls"],
                    "sSwfPath": "/Content/DataTables-1.10.4/swf/copy_csv_xls_pdf.swf"
                },
            "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                // Get All needed information
                companyName = aData[0];
                repCodeName = aData[1];
                fundClass = aData[4];

                // Check company text
                if (companyName !== null)
                {
                    if (companies[companyName] !== undefined)
                    {
                        valueCompany = companies[companyName];
                    }
                    else
                    {
                        valueCompany = companies[companyPre];
                    }
                }
                else
                {
                    valueCompany = -1;
                }
                // Check repCode
                if (repCodeName !== null && repCodes[repCodeName] !== undefined)
                {
                    valueRepCode = repCodes[repCodeName].toString();
                }

                nRow.className = "rowT " + fundClass + " " + valueCompany + " " + valueRepCode + " " + nRow.className;
                companyPre = companyName;
                return nRow;

            },
            "colVis" : colVisOption,
        });

        new $.fn.dataTable.FixedColumns(table ,
        {
            "iLeftColumns" : 5, //Freezed first for columns
            //"sHeightMatch" : "auto",
            //"iLeftWidth" : "auto"
        });

hyalkaf

This is the rest of my code:

$.fn.dataTable.pipeline = function ( opts ) {
// Configuration options
var conf = $.extend( {
pages: 1, // number of pages to cache
url: '', // script url
data: null, // function or object with parameters to send to the server
// matching how ajax.data works in DataTables
method: 'POST' // Ajax HTTP method
}, opts );

    // Private variables for storing the cache
    var cacheLower = -1;
    var cacheUpper = null;
    var cacheLastRequest = null;
    var cacheLastJson = null;

    return function ( request, drawCallback, settings ) {
        var ajax          = false;
        var requestStart  = request.start;
        var drawStart     = request.start;
        var requestLength = request.length;
        var requestEnd    = requestStart + requestLength;

        if ( settings.clearCache ) {
            // API requested that the cache be cleared
            ajax = true;
            settings.clearCache = false;
        }
        else if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {
            // outside cached data - need to make a request
            ajax = true;
        }
        else if ( JSON.stringify( request.order )   !== JSON.stringify( cacheLastRequest.order ) ||
                  JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
                  JSON.stringify( request.search )  !== JSON.stringify( cacheLastRequest.search )
        ) {
            // properties changed (ordering, columns, searching)
            ajax = true;
        }

        // Store the request for checking next time around
        cacheLastRequest = $.extend( true, {}, request );

        if ( ajax ) {
            // Need data from the server
            if ( requestStart < cacheLower ) {
                requestStart = requestStart - (requestLength*(conf.pages-1));

                if ( requestStart < 0 ) {
                    requestStart = 0;
                }
            }

            cacheLower = requestStart;
            cacheUpper = requestStart + (requestLength * conf.pages);

            request.start = requestStart;
            request.length = requestLength*conf.pages;

            // Provide the same `data` options as DataTables.
            if ( $.isFunction ( conf.data ) ) {
                // As a function it is executed with the data object as an arg
                // for manipulation. If an object is returned, it is used as the
                // data object to submit
                var d = conf.data( request );
                if ( d ) {
                    $.extend( request, d );
                }
            }
            else if ( $.isPlainObject( conf.data ) ) {
                // As an object, the data given extends the default
                $.extend( request, conf.data );
            }

            settings.jqXHR = $.ajax( {
                "type":     conf.method,
                "url":      conf.url,
                "data":     request,
                "dataType": "json",
                "cache":    false,
                "success":  function ( json ) {
                    cacheLastJson = $.extend(true, {}, json);

                    if ( cacheLower != drawStart ) {
                        json.aaData.splice( 0, drawStart-cacheLower );
                    }
                    json.aaData.splice( requestLength, json.aaData.length );

                    drawCallback( json );
                }
            } );
        }
        //else {
        //    json = $.extend( true, {}, cacheLastJson );
        //    json.draw = request.draw; // Update the echo for each response
        //    json.aaData.splice( 0, requestStart-cacheLower );
        //    json.aaData.splice( requestLength, json.aaData.length );

        //    drawCallback(json);
        //}
    }
};

// Register an API method that will empty the pipelined data, forcing an Ajax
// fetch on the next draw (i.e. `table.clearPipeline().draw()`)
$.fn.dataTable.Api.register( 'clearPipeline()', function () {
    return this.iterator( 'table', function ( settings ) {
        settings.clearCache = true;
    } );
} );