Search code examples
jquerydrop-down-menufiltertablesorter

tablesorter - hide multiple tables based on dropdown select

I am using the tablesorter plugin. The filter widget works great on a single table. Now I am trying to do 2 things with tablesorter.

  1. I am trying to hide an entire table based on the value of a dropdown list. I got a solution with the following code, but I was wondering if there is a better way in tablesorter:

    $("#search_league").change(function () {
    $("table").show();
    $("table").each(function(){
        if($("#search_league").val() != $(this).attr('id')){
            $(this).hide();
        };
    });
});

  2. The second one I find more difficult. I am trying to hide all tables that dont contain a certain value I am using a dropdown to select the value. All tables that dont contain the value should be hidden.

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

I tried to solve the problem like #1 but this doesnt seem to be the right approach. Any ideas?

Solution

  • For Q1, your answer looks great to me. However, MDJ has a good point - same result, less work.

    Question Two:

    Use .each(className) to loop through the tables, and .filter() to return whether a given table contains the required text anywhere in a tablecell.

    Here is a working simplified example:

    jsFiddle Demo slight improvement - colorize bg

    HTML:

    Hide all tables NOT containing: <select id="mysel">
    <option value="go">Choose One:</option>
    <option value="car">car</option>
    <option value="bus">bus</option>
    <option value="apple">apple</option>
    <option value="joy">joy</option>
    <option value="all">show all</option>
</select>
<table class='tablesorter' id='id_a'>
    <thead>
        <tr>
            <th class="aa"><a href='league.php?lid=17'>HREF</a>
            </th>
            <th class='num_caption' title='Spiele'>Sp</th>
            <th class='num_caption' title='Siege'>S</th>
            <th class="bb">Team</th>
        </tr>
        <tr><td class="aa">HREF</td><td>car</td><td>bus</td><td class="bb">aa1</td></tr>
        <tr><td class="aa">HREF</td><td>car</td><td>bus</td><td class="bb">aa2</td></tr>
        <tr><td class="aa">HREF</td><td>car</td><td>bus</td><td class="bb">aa3</td></tr>
    </thead>
</table>

<table class='tablesorter' id='id_b'>
    <thead>
        <tr>
            <th class="aa"><a href='league.php?lid=17'>HREF</a>
            </th>
            <th class='num_caption' title='Spiele'>Sp</th>
            <th class='num_caption' title='Siege'>S</th>
            <th class="bb">Team</th>
        </tr>
        <tr><td class="aa">HREF</td><td>joy</td><td>joy</td><td class="bb">bb1</td></tr>
        <tr><td class="aa">HREF</td><td>joy</td><td>joy</td><td class="bb">bb2</td></tr>
        <tr><td class="aa">HREF</td><td>joy</td><td>joy</td><td class="bb">bb3</td></tr>
    </thead>
</table>

<table class='tablesorter' id='id_c'>
    <thead>
        <tr>
            <th class="aa"><a href='league.php?lid=17'>HREF</a>
            </th>
            <th class='num_caption' title='Spiele'>Sp</th>
            <th class='num_caption' title='Siege'>S</th>
            <th class="bb">Team</th>
        </tr>
        <tr><td class="aa">HREF</td><td>bus</td><td>apple</td><td class="bb">cc1</td></tr>
        <tr><td class="aa">HREF</td><td>bus</td><td>apple</td><td class="bb">cc2</td></tr>
        <tr><td class="aa">HREF</td><td>joy</td><td>joy</td><td class="bb">cc3</td></tr>
    </thead>
</table>

<table class='tablesorter' id='id_d'>
    <thead>
        <tr>
            <th class="aa"><a href='league.php?lid=17'>HREF</a>
            </th>
            <th class='num_caption' title='Spiele'>Sp</th>
            <th class='num_caption' title='Siege'>S</th>
            <th class="bb">Team</th>
        </tr>
        <tr><td class="aa">HREF</td><td>car</td><td>car</td><td class="bb">a1</td></tr>
        <tr><td class="aa">HREF</td><td>bus</td><td>bus</td><td class="bb">a2</td></tr>
        <tr><td class="aa">HREF</td><td>apple</td><td>joy</td><td class="bb">a3</td></tr>
    </thead>
</table>

    jQuery/js:

    $('#mysel').change(function(){
    var i = this.value;
    if (i=='go') return false;
    if (i=='all') {$('.tablesorter').show();$('#mysel').val('go');return false;}

    $('.tablesorter').each(function(){
        var tid = this.id;
        var xxx = hasitem(tid, i);
//alert(xxx[0]);
        if (typeof xxx[0] == 'undefined') {
            $('#'+tid).hide();
        }else{
            $('#'+tid).show();
        }
    });
});
function hasitem(tbl, item){
//alert('Table = ' +tbl+ '  Item = ' +item);
    var tableRow = $("#"+tbl+ " td").filter(function() {
        return $(this).text() == item;
    }).closest("tr");
    return tableRow;
}

    CSS (to make it pretty):

    table {border:1px solid grey;border-collapse:collapse;width:200px;}
table {margin:20px;}
th, td {border:1px solid grey;}
th, td {width:20px;text-align:center;}
.aa {width:50px;}
.bb {display:none;}
#id_a{background:wheat;}
#id_b{background:lavender;}
#id_c{background:paleyellow;}
#id_d{background:palegreen;}