Question

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

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

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);
        });
});

tablesorter - 基于一列的过滤器隐藏多个表

1 个答案: