AdomasArabella AdomasArabella - 22 days ago 5
HTML Question

How to make a Jquery filter for table

I have a really big table and want to create a filter with jquery for it. Basically, I want to make something like this. Watch the image.

$(document).ready(function(){
$("#button").click(function(){
if ($("#checkbox1").is(':checked'))
$(".anglu").show();
else
$(".anglu").hide();
});
});


Image

My code looks something like this. However, It takes a lot of time to write every class for every table. Maybe I could do It quicker way? Also, this Jquery doesn't work for some reason. Any Ideas?

<table style="width:100%">
<thead>
<tr>
<th>Gidas</th>
<th>Kategorija</th>
<th>Kalbos</th>
<th>Veda po salis</th>
<th>Kontaktai</th>
<th>E-pastas</th>
</tr>
</thead>
<tr class="anglu">
<td>Akucevičiūtė, Jūratė</td>
<td>Aukščiausia - Ekspertas</td>
<td>Anglu</td>
<td>Italija</td>
<td>+370564845698</td>
<td>rutasiogoliavaitegmail.com</td>
</tr>
<tr>
<td>Abaravičiūtė, Rūta</td>
<td>Antra</td>
<td>Rusų</td>
<td>Estija, Islandija, Latvija, Lietuva</td>
<td>+37056965698</td>
<td>geramoerishotmail.lt</td>
</tr>
<tr>
<td>Arlauskienė, Vitalija</td>
<td>Pirma</td>
<td>Lenku</td>
<td>Estija, Latvija, Lenkija, Lietuva, Liuksemburgas, Nyderlandai, Suomija, Švedija</td>
<td>+37056568698</td>
<td>gomuriotiesapastininkas.lt</td>
</tr>
</table>

Jim Jim
Answer

Here is a quick way I would do it:

Setup the tables with appropriate classes and IDs to be selected easily:

<div id="country-filters">
<input type="checkbox" id="filter-united_states" value="United States" /> <label for="filter-united_states">Unied States</label>
<input type="checkbox" id="filter-africa" value="Africa" /> <label for="filter-africa">Africa</label>
<input type="checkbox" id="filter-china" value="China" /> <label for="filter-china">China</label>
</div>
<button id="filter-button">Filter</button>

<table id="values-table" style="margin-top:20px;">
<thead>
  <tr>
    <td>Guide</td>
    <td>Category</td>
    <td>Languages</td>
    <td>Countries</td>
    <td>Phone Number</td>
    <td>Email</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="guide">JavaScript</td>
    <td class="category">Client Script</td>
    <td class="languages"><span class="language">English</span>, <span class="language">Spanish</span></td>
    <td class="countries"><span class="country">United States</span>, <span class="country">China</span></td>
    <td class="phone">555-555-5555</td>
    <td class="email"></td>
  </tr>
  <tr>
    <td class="guide">PHP</td>
    <td class="category">Server Script</td>
    <td class="languages"><span class="language">English</span></td>
    <td class="countries"><span class="country">Africa</span></td>
    <td class="phone">555-555-5555</td>
    <td class="email"></td>
  </tr>
  <tr>
    <td class="guide">ASP.net</td>
    <td class="category">Server Script</td>
    <td class="languages"><span class="language">Mandarin</span></td>
    <td class="countries"><span class="country">China</span></td>
    <td class="phone">555-555-5555</td>
    <td class="email"></td>
  </tr>
</tbody>
</table>

Add a filter function when filter button is clicked:

$("#filter-button").on("click", function(e){
    // Show all rows (in case any were hidden by a previous filtering)
    jQuery("#values-table > tr:hidden, #values-table > tbody > tr:hidden").show();
    // Get all filtered countries as array
    var selCountries = $("#country-filters input[type='checkbox']:checked").map(function(){return $(this).val();}).get();
    if( selCountries.length < 1 ) {
        return; // No countries are selected!
    }
    // Loop through all table rows
    $("#values-table > tr, #values-table > tbody > tr").each(function(){
        // Loop through and return only rows that DO NOT contain a selected country and hide them
        $(this).filter(function(idx){
            return $(this).find("> td.countries > span.country")
                .filter(function(){return selCountries.indexOf($(this).text()) >= 0;}).length < 1;
        }).hide();
    });
});

JSFiddle of above code