column reorder after filter

[Username83]

Hi,

after a filter in a column, if I try to move a column that is stored before the filtered column in a position after the filtered column, the filter is not updated correctly. Infact, the text used to filter remains in the same filter input, but the column with the filtered value is now shifted and the filter is also cancelled.
In this case the filter should be not cancelled and should be shifted with the column (best solution) or the input field should be cleaned (worst solution).

Thanks

[Mottie]

Hi @Username83!

The column reorder widget needs a lot of work - it is still in alpha development.

I am currently busy with unrelated projects and likely will not update the reorder widget for tablesorter. But I will work on a solution for the next iteration of this plugin which will be named Abelt. Sorry I don't have a definite timeline for this update.

[Mottie]

Can you try this demo, which uses the jQuery UI dragtable widget (requires sortable), to see if it solves the issues you are having.

[Username83]

Hi Mottie,

thanks for your answers!

with this demo my problem is partially solved, because the filter is cleaned. However, the best solution would be to reorder the column and keep the filter.

[Mottie]

Oh, oops! Try this demo

It's not very pretty because refreshing the widgets causes all rows to become visible, then the filter needs to be applied again after dropping the column. I'll see what I can do about that when I get some time.

$(function () {
    var lastSearch,
    $table = $('table:first')
    .dragtable({
        dragHandle: '.handle',
        excludeFooter: true,
        beforeStart: function(){
            lastSearch = $table.data('lastSearch');
        },
        persistState: function (table) {
            var columnOrder = $table.children('thead').children('.tablesorter-headerRow').children().map(function(){
                return $(this).attr('data-column');
            }).get(),
            // update moved filters
            filters = [];
            $.each( lastSearch, function(i){
                filters[i] = lastSearch[ columnOrder[i] ];
            });
            // remove div wrapper, or swapped header
            // contents will be replaced
            $table.find('thead .tablesorter-header-inner').contents().unwrap();
            $table.trigger('updateAll', [ false, function(){
                setTimeout(function(){
                    $table[0].config.lastCombinedFilter = null;
                    // $table.trigger('search', [ filters ]);
                    $.tablesorter.setFilters( $table, filters, true );
                }, 200);
            }]);
        }
    })
    .tablesorter({
        theme: 'blue',
        selectorSort: '.sort',
        widthFixed: true,
        widgets: ['zebra', 'filter']
    });

});

[Username83]

Perfect!!! now it works as expected!

I will wait your next releases for an optimization :)

Thanks a lot!

[Mottie]

Hey @Username83!

Try this updated demo - it is using tablesorter core & widget files from the working branch and a highly modified version of dragtable in the demo javascript window.

The only issue I have is that a resized column width isn't retained after moving because there are no set widths (setting widthFixed prevents the resizable widget from working) and setting the resizable_widths option would not work properly because the settings aren't being moved along with the column... I guess I could add that into the dragtable plugin.

Otherwise, please test it out and tell me if you run into any other issues. Thanks!

$(function () {
    var last = {},
        getOrder = function(){
            return $table.children('thead').children('.tablesorter-headerRow').children().map(function(){
                return $(this).attr('data-column');
            }).get();
        },
        $table = $('table:first')
            .dragtable({
                dragHandle: '.table-handle',
                excludeFooter: true,
                beforeStart: function(){
                    last.search = $table.data('lastSearch');
                    last.order = getOrder();
                },
                persistState: function (table) {
                    var columnOrder = getOrder(),
                        hasFilters = $.tablesorter.hasWidget($table, 'filter'),
                        // update moved filters
                        filters = [];
                    if (hasFilters) {
                        $.each( last.search || [], function(i){
                            filters[i] = last.search[ columnOrder[i] ];
                        });
                    }
                    // only trigger updateAll if column order changed
                    if (last.order.join('') !== columnOrder.join('')) {
                        // remove div wrapper, or swapped header
                        // contents will be replaced
                        $table.find('thead .tablesorter-header-inner').contents().unwrap();
                        $table.trigger('updateAll', [ false, function(){
                            if (hasFilters) {
                                setTimeout(function(){
                                    $table[0].config.lastCombinedFilter = null;
                                    $.tablesorter.setFilters( $table, filters, true );
                                }, 200);
                            }
                        }]);
                    }
                }
            })
            .tablesorter({
                theme: 'blue',
                selectorSort: '.sort',
                widgets: ['zebra', 'filter', 'resizable']
            });

});

[Username83]

Hi,

it seems there aren't other issues, excepted the resized columns. It works as expected.

Thanks,
Fabio

[Mottie]

Check out the new dragtable demo!

[Username83]

Very good!

Thanks!