Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

support inline filter UI to header rows #418

Closed
ekuleshov opened this Issue · 4 comments

2 participants

@ekuleshov

Currently filter widget adds a separate row with filter UI fields.
It would be neat to be able to embed these controls into the header columns without adding separate row. Especially if filtering is only needed for some subset of columns.

@Mottie
Owner

Hi @ekuleshov!

Do you have an example of what you mean by embedding the controls? Do you mean within the header itself?

With the API you can pretty much put inputs anywhere you want, then use the $.tablesorter.setFilters() function to initialize the search.

// update filters, AND apply the search (true flag)
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true );

If you do put inputs into the header cells, make sure to set the selectorSort option to an element within the header that doesn't include the input.

Try this demo

HTML

<table class="tablesorter">
    <thead>
        <tr>
            <th><span>AlphaNumeric</span><input type="search"/></th>
            <th><span>Numeric</span></th>
            <th><span>Animals</span><input type="search"/></th>
            <th><span>Sites</span></th>
        </tr>
    </thead>
    <!-- ... -->
</table>

Script

var filters, $filters,
    $table = $('table');

$table.tablesorter({
    theme: 'blue',
    selectorSort: 'span',
    widgets: ['zebra', 'columns', 'filter'],
    widgetOptions: {
        filter_columnFilters: false
    }
});

// headers are rebuilt, so we need to target the filters after the table has initialized
// or use delegated events
$filters = $table.find('th input');

$filters.on('change search', function(){
    var filters = [];
    // only two inputs; so eq() is sequential
    // filters array indexes need to match the column
    filters[0] = $filters.eq(0).val();
    filters[2] = $filters.eq(1).val();
    $.tablesorter.setFilters($table, filters, true);
});
@ekuleshov

Thanks for examples.
What I was trying to do is something like this http://jsfiddle.net/abkNM/1584/
I can't figure it out why in my app click on dropdown triggers sort for that column and drop down is not even shows selection list.
In your modified example it is not the case, but somehow sort does not work after I replaced header text with selection dropdown. Any idea how to fix that?

@Mottie
Owner

Well since you need something for the user to click on in the first column, I switched to using the bootstrap theme - you can click on the icon (don't forget to include bootstrap).

Then you just need to make sure that the filters variable includes the select (Updated demo):

var filters, $filters,
    $table = $('table');

$table.tablesorter({
    theme: 'bootstrap', // make sure to load the theme.bootstrap.css file
    headerTemplate: '{content}{icon}', // make sure to include the icon
    selectorSort: 'i', // click on the icon to sort
    widgets: ['zebra', 'uitheme', 'filter'], // include uitheme to apply bootstrap
    widgetOptions: {
        filter_columnFilters: false
    }
});

// headers are rebuilt, so we need to target
// the filters after the table has initialized
// or use delegated events
$filters = $table.find('th input, th select');

$filters.on('change search', function(){
    var filters = [];
    filters[0] = $filters.eq(0).val();
    filters[2] = $filters.eq(1).val();
    $.tablesorter.setFilters($table, filters, true);
});
@ekuleshov

That's pretty cool. Thank you a lot!

@ekuleshov ekuleshov closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.