DataTables 1.10.1 and ColReorder sort indication problem

hubo

I am using DataTables 1.10.1 with ColReorder 1.1.1 and after columns reorder and clicking to sort by that column, it indicates sort on wrong column (probably column index is not updated after reorder).

hubo

I find out, that the index is updated, but it is offset by 1 to the left or right.

hubo

It occurs when I use DataTable with jQueryUI: true.

hubo

The attribute aria-sort="ascending/descending" is set to the right column, but class "sorting_asc/sorting_desc" is set to the wrong one.

hubo

Latest DataTables 1.10.1 and ColReorder 1.1.2 still has this problem.

allan

Works okay for me with the currently nightlies of DataTables and ColReorder. If it isn't working for you, please link me to a test page showing the issue, using the nightlies of ColReorder and DataTables. The nightly are available on the downloads page.

Allan

hubo

OK, I have made an example.

Key condition is DataTables with jQueryUI: true.

When you reorder columns and click on the header to change order of rows, wrong header is marked as ordered by.

Whilst I have creating this example, I find out another bug you can see. After reorder the data-order on one of the columns creates an error dialog.

http://live.datatables.net/vajoxis/12/edit?html,css,js,output

allan

Fix for the HTML5 data attributes committed here. Thanks for letting me know about that.

Allan

hubo

Great, data-order problem looks fixed. Now the main jQueryUI: true problem remains.

hubo

Are you aware that this bug is still not fixed?

allan

The JUI one? Yes. I'll fix it when I get a chance to do so. At the moment I've got a significant back log and I might not get to it for a little while.

Allan

skrivenko

This code can help to avoid this problem:

  $table.on('column-reorder', function ( e, oSettings, reorderSettings) {
                var i, iLen, iCols=oSettings.aoColumns.length;
                for ( i=0, iLen=iCols ; i<iLen ; i++ )
                {
                    $(oSettings.aoColumns[i].nTh).off('click');
                    oSettings.oApi._fnSortAttachListener( oSettings, oSettings.aoColumns[i].nTh, oSettings.aoColumns[i]._ColReorder_iOrigCol );
                }
            });

Actually, the ColReorder contains very similar code except that the listener is added with "i" parameter instead of "oSettings.aoColumns[i]._ColReorder_iOrigCol".
So, the code above is a workaround for this problem

skrivenko

This code can help to avoid this problem:

  $table.on('column-reorder', function ( e, oSettings, reorderSettings) {
                var i, iLen, iCols=oSettings.aoColumns.length;
                for ( i=0, iLen=iCols ; i<iLen ; i++ )
                {
                    $(oSettings.aoColumns[i].nTh).off('click');
                    oSettings.oApi._fnSortAttachListener( oSettings, oSettings.aoColumns[i].nTh, oSettings.aoColumns[i]._ColReorder_iOrigCol );
                }
            });

Actually, the ColReorder contains very similar code except that the listener is added with "i" parameter instead of "oSettings.aoColumns[i]._ColReorder_iOrigCol".
So, the code above is a workaround for this problem

skrivenko

Actually, my mistake - the code above will not much help with this issue. It looks like it helps with sorting, but there is also the minor problem that some columns are get sorted only on second click (not on the first click). And the code above actually uses some wrong concepts in this plugin.

Alternativelly, the proper fix in my opinion would be the following (dataTables.colReorder.js):

        /* 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 -- !!!!! COMMENT THIS LINE
            }

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

and right before the triggering 'column-reorder' event (the fix is surrounded with the todo comments):

        // 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
        } ] );

hubo

The indication problem is solved in DataTables 1.10.4 and ColReorder 1.1.2, but when I change the column order the data are not ordered by the right column.