Latest DataTables with ColReorder and Save State Functionality - Reloading Problem

skrivenko

Hi all,

I am trying to use the latest DataTables 1.10.2 with the latest ColReorder extension 1.1.2 http://jsfiddle.net/00bzz3th/1/.

In this case there is a problem with reloading the data. It reloads the data in the original order and not in the new order, if any columns have been re-ordered (e.g. if I switch A and B columns, then click Reload - the data with A goes under column B and the data with B goes under column A).

I have found some previous version of the ColReorder 1.1.0-dev, where this problem seems to be fixed http://jsfiddle.net/hnam8sr0/1/. The problem appears when I am trying to use this version with the saveState functionality (and using both of the load/ save callbacks to store the data on the server via Ajax) - this saveState functionality in this version of the plugin seems to be not compatible with the latest DataTables version e.g. I get an error in the console :
Uncaught TypeError: Cannot read property 'length' of undefined dataTables.colReorder.js:698 (It cannot find the property oState.aaSorting because some other properties are used in the latest DataTables).

Does anyone know if the fix for the reloading problem will be moved soon in the new version of the ColReorder? Or are there any workaround for this scenario?

Thank you much!!

skrivenko

I have found the proper fixes in my opinion for the current version of the plugin. If someone finds it useful, the code is below (the suggested fix are highlighted with the todo comments). Though it would be really nice to have the new version of the plugin.

        /* Data column sorting (the column which the sort for a given column should take place on) */
        for ( i=0, iLen=iCols ; i<iLen ; i++ )
        {
            oCol = oSettings.aoColumns[i];
            for ( j=0, jLen=oCol.aDataSort.length ; j<jLen ; j++ )
            {
//                oCol.aDataSort[j] = aiInvertMapping[ oCol.aDataSort[j] ]; // todo:SK - the fix for data sorting
            }

            // Update the column indexes
            if ( v110 ) {
                oCol.idx = aiInvertMapping[ oCol.idx ];
            }
        }

        /* Update the Get and Set functions for each column */
        for ( i=0, iLen=iCols ; i<iLen ; i++ )
        {
            oCol = oSettings.aoColumns[i];

            if ( typeof oCol.mData == 'number' ) {
//                oCol.mData = aiInvertMapping[ oCol.mData ];  // todo:SK - the fix for data populating

                // regenerate the get / set functions
                oSettings.oApi._fnColumnOptions( oSettings, i, {} );
            }
            else if ( $.isPlainObject( oCol.mData ) ) {
                // HTML5 data sourced
//                attrMap( oCol.mData, '_',      aiInvertMapping );  // todo:SK - the fix for data populating
//                attrMap( oCol.mData, 'filter', aiInvertMapping );  // todo:SK - the fix for data populating
//                attrMap( oCol.mData, 'sort',   aiInvertMapping );  // todo:SK - the fix for data populating
//                attrMap( oCol.mData, 'type',   aiInvertMapping );  // todo:SK - the fix for data populating

                // regenerate the get / set functions
                oSettings.oApi._fnColumnOptions( oSettings, i, {} );
            }
        }

            if ( v110 ) {
                // DataTables 1.10+
                if ( data.anCells ) {
                    fnArraySwitch( data.anCells, iFrom, iTo );
                }

                // For DOM sourced data, the invalidate will reread the cell into
                // the data array, but for data sources as an array, they need to
                // be flipped
                if ( data.src !== 'dom' && $.isArray( data._aData ) ) {
//                    fnArraySwitch( data._aData, iFrom, iTo );  // todo:SK - the fix for data populating
                }
            }
            else {
                // DataTables 1.9-
                if ( $.isArray( data._aData ) ) {
//                    fnArraySwitch( data._aData, iFrom, iTo );  // todo:SK - the fix for data populating
                }
//                fnArraySwitch( data._anHidden, iFrom, iTo );  // todo:SK - the fix for data populating
            }

        // todo:SK - the fix for the sorting is below VVV
        // Attach a sort listener to update on sort
        if (oSettings.bJUI) {
            $(oSettings.nTable).off('order.dt.DT');
            $(oSettings.nTable).on('order.dt.DT', function (e, ctx, sorting, columns) {
                if (oSettings !== ctx) {
                    return;
                }
                for (var i = 0, iLen = oSettings.aoColumns.length; i < iLen; i++) {
                    var column = oSettings.aoColumns[i];
                    var cell = $(column.nTh);
                    var colIdx = column.idx;
                    var classes = oSettings.oClasses;
                    cell
                        .removeClass(classes.sSortAsc + " " + classes.sSortDesc)
                        .addClass(columns[ colIdx ] == 'asc' ?
                            classes.sSortAsc : columns[ colIdx ] == 'desc' ?
                            classes.sSortDesc :
                            column.sSortingClass
                    );

                    cell
                        .find('span.' + classes.sSortIcon)
                        .removeClass(
                            classes.sSortJUIAsc + " " +
                            classes.sSortJUIDesc + " " +
                            classes.sSortJUI + " " +
                            classes.sSortJUIAscAllowed + " " +
                            classes.sSortJUIDescAllowed
                    )
                        .addClass(columns[ colIdx ] == 'asc' ?
                            classes.sSortJUIAsc : columns[ colIdx ] == 'desc' ?
                            classes.sSortJUIDesc :
                            column.sSortingClassJUI
                    );
                }

            });
        }
        // todo:SK - the fix for the sorting is above

        /* Fire an event so other plug-ins can update */
        $(oSettings.oInstance).trigger( 'column-reorder', [ oSettings, {
            "iFrom": iFrom,
            "iTo": iTo,
            "aiInvertMapping": aiInvertMapping
        } ] );
 

Summary: comment reverting the order of mData, aData, aDataSort + extra code for the sorting fix before trigger the column-reorder event