CODEWITHSUNDEEP
javascriptjquerycssfiltertablesorter
squale
squale

Reputation: 35

hide/display filter for tablesorter

I d like to be able to hide/display the filters while using tablesorter.

Using table sorter just went fine but when i added a button to execute :

function display_hide_filter() {

    var filters = document.getElementsByClassName('tablesorter-filter-row');

     for (var i = 0; i < filters.length; i++) {
        var filter = filters[i];
        if (filter.style.display == 'none') {
            filter.style.display='inline';
        } else {
            filter.style.display='none';
        }
    }
}

I then get a weird answer. Hiding the filter is fine but re displaying turn into having all filter cells under the first header cell.

Since i got poor english and css/js skills, I just hope I didnt miss something about it in the documentation but i tried to get trough it a thousant times with no success.

Thanks for any help

Upvotes: 0

Views: 911

Answers (2)

Mottie
Mottie

Reputation: 86403

There is a filter_hideFilters option that minimizes the filter row until the user hovers over it. It is also accessible friendly in that the user can use the tab key gain access the filter inputs (demo).

If you just want to hide/show the filter row, then this basic code would work (demo):

HTML

<button type="button">Toggle Filter Row</button>

Script

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widthFixed: true,
        widgets: ['zebra', 'filter']
    });

    $('button').click(function(){
        $('.tablesorter-filter-row').toggle();
    });
});

Upvotes: 3

squale
squale

Reputation: 35

As Andreas pointed out, I used 'inline' where i should have used ''

Upvotes: 0

Related Questions