tablesorter - 根据一列的过滤器隐藏多个表

Question

我正在使用 jquery tablesorter 来过滤表。现在我正在尝试从外部下拉列表中选择一个值，并根据该值隐藏一个或多个表。代码应在隐藏列“团队”中搜索。如果在此列中未找到该值，则表应“隐藏”。

这些表是由 mysql 查询和 php.ini 创建的。这些是表头。

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>";

这似乎比我想象的要复杂。有没有办法用 tablesorter 来做，或者是拥有自己的功能的最好方法？有什么想法吗？

Answer 1

试试这个 (demo)：

CSS

.hidden { display: none; }

HTML

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

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

脚本

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