Filter widget filter row doesn't inspect if the column is visible (i.e. display: none)

[maestrofjp]

We use bootstrap 2's .hidden-phone attribute to hide columns on small displays -- this make the display attribute of a column set to none. When using the filter widget (the one that adds an extra row with search fields), it has too many <td>s because it doesn't look to see if the column is actually visible.

I'd come up with a PR but I'm unsure how you'd want to solve it. If you gave me some insight, I would gladly write a PR for you.

[Mottie]

Hi @maestrofjp!

I believe that issue has been fixed. Are you using the latest version of the plugin?

---

Edit: Actually, I stand corrected. I was thinking about something else.

You can get around this by including the hidden-phone class in the filter_cssFilter option:

// add "hidden-phone" class to 3rd column
filter_cssFilter: [ '', '', 'hidden-phone' ]

[peterfarrell]

Thanks for the suggestion @Mottie . I tried it, but the class hidden-phone is applied to the input element. This hides the search input, but it leaves behind an empty cell which isn't quite correct. The class hidden-phone needs to be applied to the td element to hide the entire column if you're not going to show an entire column on mobile in Bootstrap 2.

I feel like the filter when it builds the search row, that it should look in the corresponding column thead to see if the visibility is not none and follow suite. If a td in the thead is not displayed, the search row should set display:none; as well.

[Mottie]

Try using the config.$filters variable in a filterInit callback (demo):

$(function () {
    $('table')
        .on('filterInit', function(e, c){
            c.$filters.eq(2).addClass('green');
        })
        .tablesorter({
            theme: 'blue',
            widgets: ['zebra', 'filter']
        });
});

[peterfarrell]

Thanks for the suggestion.

I ended up doing some muckering about. It's not ideal, but at least I it introspects the th for hidden-phone class and adds them to the filter row. We have tons of tables so having to explicitly set the class for each filter column would be tedious. I'm sure there is a more elegant way that what I outline below, but after 12 hours of coding --- I'm being lazy.

    th_css_classes = [];

    $(target + ' .tablesorter-headerRow th').each(function() {
        if ( $(this).hasClass('hidden-phone') ) {
            th_css_classes.push('hidden-phone');
        } else {
            th_css_classes.push('');
        }
    });

    $(target + ' .tablesorter-filter-row td').each(function(index) {
        $(this).addClass(th_css_classes[index]);
    });

[Mottie]

LOL, ok, I think I'll work on adding a new option allows setting the cell class name as well. I was thinking about adding a callback, but that would get tricky if the developer adds filters using the filter_formatter option to modify the cell contents; it all gets really messy.

I think in the next major iteration, I'll just let you set an option to target a pre-built filter row and then have the widget work out the rest.

[peterfarrell]

Thanks so much!