Mottie / tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~
https://mottie.github.io/tablesorter/docs/
2.61k stars 754 forks source link

Apply Filter not to all tables #743

Closed megatom closed 10 years ago

megatom commented 10 years ago

In Version 2.14 i used following code to apply filter only on specified tables.

                 if($(".sortableFilter").length){
            // Update the list of widgets to apply to the table (add or remove) 
            $(".sortableFilter").data("tablesorter").widgets = ['filter'];  
            // This method applies the widget - no need to keep updating 
            $('.sortableFilter').trigger('applyWidgets'); 
            return false;
        }

But this code do not work in 2.16 and 2.17. I cannot find any changes made to filter that uses different code. Is there any solution? Maybe you can add an option to apply filter only on specified classes?

megatom commented 10 years ago

I downgraded to 2.15.14, and it works in this version too. So something must have changed in 2.16, but i dont figure out what it is.

Mottie commented 10 years ago

Hi @megatom!

When you use data it only returns an object from the first table. So instead, loop through each table:

if ( $( '.sortableFilter' ).length ){
    // Update the list of widgets to apply to the table (add or remove)
    $( '.sortableFilter' ).each( function() {
        var $table = $( this );
        // push filter adds the widget to the end of the list of widget
        // using widgets = [ 'filter' ] removes all other widgets, except filter
        $table.data( 'tablesorter' ).widgets.push( 'filter' );
        $table.trigger( 'applyWidgets' );
    });
    return false;
}
megatom commented 10 years ago

This seems not to work. I get this error in console: Uncaught TypeError: Cannot read property 'widgets' of undefined

Mottie commented 10 years ago

Make sure to add that code after the tablesorter initialization code.

megatom commented 10 years ago

It is after init: (In 2.15 it worked fine...)

$(".sortable").tablesorter({
cancelSelection: false, widgets: [ 'stickyHeaders' ], selectorHeaders: 'thead th, thead td', widgetOptions : { stickyHeaders_offset : 30, stickyHeaders_addResizeEvent : true } });

if ( $( '.sortableFilter' ).length ){ // Update the list of widgets to apply to the table (add or remove) $( '.sortableFilter' ).each( function() { var $table = $( this ); // push filter adds the widget to the end of the list of widget // using widgets = [ 'filter' ] removes all other widgets, except filter $table.data( 'tablesorter' ).widgets.push( 'filter' ); $table.trigger( 'applyWidgets' ); }); return false; }

Mottie commented 10 years ago

The difference might be due to the timing of when the plugin gets initialized. It might be better to try this code:

$(".sortable").tablesorter({

    cancelSelection: false,
    widgets: [ 'stickyHeaders' ],
    selectorHeaders: 'thead th, thead td',
    widgetOptions : {
        stickyHeaders_offset : 30,
        stickyHeaders_addResizeEvent : true
    },

    initialized: function(table){
        var $table = $(table);
        if ( $table.hasClass('sortableFilter') ) {
            $table.data( 'tablesorter' ).widgets.push( 'filter' );
            $table.trigger( 'applyWidgets' );
        }
    }

});

I'll see what I can do to make this more efficient, like just adding a table class name widget-filter, or some definable class name to include specific widgets.

megatom commented 10 years ago

I tried the new code, but still dont work :( Now I get no errors, but no filter too. With 2.15.14 your new code works fine, but not in 2.16 or 2.17

megatom commented 10 years ago

I am really surprised to see that the filter appears on first time i click on an header to sort a column. This happens in 2.16 and in 2.17 too. But before clicking on header no filter is visible. See here: http://jsfiddle.net/m3og5gdt/

Mottie commented 10 years ago

Apparently, I needed to include a setTimeout to get it to work (updated demo):

$('table').tablesorter({
    cancelSelection: false,
    widgets: ['stickyHeaders'],
    selectorHeaders: 'thead th, thead td',
    widgetOptions: {
        stickyHeaders_offset: 30,
        stickyHeaders_addResizeEvent: true
    },
    initialized: function (table) {
        var $table = $(table);
        if ($table.hasClass('sortableFilter')) {
            table.config.widgets.push('filter');
            setTimeout(function(){
                $table.trigger('applyWidgets');
            }, 1);
        }
    }
});

Like I said, this will only be a temporary work around until I add a feature to use the table class name to include widgets.

megatom commented 10 years ago

In 2.16 this workaround helps, but 2.17 still throws error on typing into filter input: TypeError: e.lastSearch is undefined So I will wait for the enhancement...