tablesorter - hide multiple tables based on filter

问题:

I am using jquery tablesorter to filter tables. Now I am trying to select a value from an external dropdown and based on that value to hide one or multiple tables. The code should search in the hidden column "Team". If the value is not found in this column the table should "hide".

The tables are created by a mysql query and php. These are the table header.

echo "<table class='tablesorter' id='".$lid."' style='width:80%'>
<thead>
<tr>            
    <th colspan='2'><a href='league.php?lid=".$lid."'>".$getlid['LEA']."</a></th>
    <th class='num_caption' title='Spiele'>Sp</th>
    <th class='num_caption'  title='Siege'>S</th>
    <th class='num_caption'  title='Niederlagen'>N</th>
    <th class='num_caption'  title='Wertungspunkte'>WP</th>
    <th class='num_caption'  colspan='2' title='Korbpunkte'>Punkte</th>         
    <th class='num_caption'  title='Differenz Korbpunkte'>Dif</th>                          
    <th class='num_caption'  title='Spiele verloren mit Spielwertung'>Wert</th>     
    <th style='display:none';>Team</th>
</tr>
</thead>";

This seem to be more complex then I thought.Is there a way to do it with tablesorter or is the best way to have my own functions? Any ideas?

回答1:

Try this (demo):

CSS

.hidden { display: none; }

HTML

<select class="search" data-column="0">
    <option></option>
    <option>...</option>
</select>

<table>...</table>
<table>...</table>

Script

$(function () {
    $('table')
        .tablesorter({
            theme: 'blue',
            widgets: ['zebra', 'filter'],
            widgetOptions: {
                filter_external: '.search'
            }
        })
        .on('filterEnd', function(){
            $(this).toggleClass('hidden', this.config.filteredRows === 0);
        });
});