Skip to content Skip to sidebar Skip to footer
Home / Dropdown / Html Table / Javascript / Jquery

How To Add A JQuery Filter To A Html Table?

Post a Comment
I'm trying to put a drop down filter to a html table using JQuery. Here's the code. report.php

Solution 1:

Salam, i think you can filter by cell text instead of row text, just add class to your cell

<td>{$report[$i]['Term']}</td>

like that

<td class='term'>{$report[$i]['Term']}</td>

and change your search function to 

function filterText()
    {  
        var val = $('#filterText').val().toLowerCase();
        if(val === "")
           return;
        if(val === "all")
          clearFilter();
        else
        $('.term').each(function() {
            $(this).parent().toggle($(this).text().toLowerCase() === val);
            });

    }

Solution 2:

Salam, there are no problem in my side, try run this snippet here and you'll see that it work fine just find what is the deference in you generated html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function filterText()
    {  
        var val = $('#filterText').val().toLowerCase();
        if(val === "")
           return;
        if(val === "all")
          clearFilter();
        else
        $('.term').each(function() {
            $(this).parent().toggle($(this).text().toLowerCase() === val);
            });

    }
   function clearFilter()
    {
        $('.filterText').val('');
        $('.row').show();
    }
</script>

<table id ="myTable" class="table table-striped">

            <thead>
                <tr>
                    <th> First Name </th>
                    <th> Last Name </th>                  
                    <th> Phone </th>
                    <th> Email </th>              
                    <th> Gender</th>

                        <th>Term
                        <select id="filterText"  onchange='filterText()'>
                              <option disabled selected>Select</option>
                              <option value="all">All</option>
                              <option value="Fall2018">Fall2018</option> 
                              <option value="Srping2019">Spring2019</option>
                        </select></th>
                    <th> Action </th>

                </tr>
            </thead> 
            <tbody>             
            <tr class='row'>

            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
            <td class="term">something</td>
            <td><a class=btn href=''>Read</a></td>  
            </tr>
            <tr class='row'>

            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
            <td class="term">Fall2018</td>
            <td><a class=btn href=''>Read</a></td>  
            </tr>
            <tr class='row'>

            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
            <td class="term">Spring2019</td>
            <td><a class=btn href=''>Read</a></td>  
            </tr>
            
            </tbody> 
        </table>

Post a Comment for "How To Add A JQuery Filter To A Html Table?"

Menu Halaman Statis

© 2022 - javascript dox