How To Add A Jquery Filter To A Html Table?
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
functionfilterText()
{
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
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>functionfilterText()
{
var val = $('#filterText').val().toLowerCase();
if(val === "")
return;
if(val === "all")
clearFilter();
else
$('.term').each(function() {
$(this).parent().toggle($(this).text().toLowerCase() === val);
});
}
functionclearFilter()
{
$('.filterText').val('');
$('.row').show();
}
</script><tableid ="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
<selectid="filterText"onchange='filterText()'><optiondisabledselected>Select</option><optionvalue="all">All</option><optionvalue="Fall2018">Fall2018</option><optionvalue="Srping2019">Spring2019</option></select></th><th> Action </th></tr></thead><tbody><trclass='row'><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><tdclass="term">something</td><td><aclass=btnhref=''>Read</a></td></tr><trclass='row'><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><tdclass="term">Fall2018</td><td><aclass=btnhref=''>Read</a></td></tr><trclass='row'><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><tdclass="term">Spring2019</td><td><aclass=btnhref=''>Read</a></td></tr></tbody></table>
Post a Comment for "How To Add A Jquery Filter To A Html Table?"