tablesorter - 根据一列的过滤器隐藏多个表 [英] tablesorter - hide multiple tables based on filter of one column

问题描述

我正在使用jquery tablesorter来过滤表。现在我试图从外部下拉菜单中选择一个值，并根据该值来隐藏一个或多个表。代码应该在隐藏的列Team中进行搜索。如果在这个列中没有找到该值，那么该表应该隐藏。

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

  echo< table class ='tablesorter'id ='。$ lid。' style ='width：80％'> 
< thead> 
< tr> 
< th colspan ='2'>< a href ='league.php？ $ 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 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：non e';>团队< / th> 
< / tr> 
< / thead>; 
  

这似乎是比较复杂的，然后我想。有没有办法做到这一点与tablesorter或是有我自己的功能的最佳途径？任何想法？

解决方案

试试这个（ $ b $ c

  .hidden {display：none; } 
  

HTML

 < select class =searchdata-column =0> 
< option>< / option> 
< option> ...< / option> 
< / select> 
 
< table> ...< / table> 
< table> ...< / table> 
  

脚本

  $（
 $主题：'blue'，
 widgets：['zebra'，'过滤器']，
 widgetOptions：{
 filter_external：'.search'
} 
}）
 .on（'filterEnd'，function（）{
 $（this）.toggleClass（'hidden'，this.config.filteredRows === 0）; 
}）; 
}）; 
  

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?

解决方案

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

这篇关于tablesorter - 根据一列的过滤器隐藏多个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！