Help with Filter Table

hi! He want to do an input box with a Filter Table options. My input box is:

        <input class="form-control" id="myInput" type="text" placeholder="Search..">

and this code to generate a table:

   $data = '<table class="table table-bordered table-striped">
                                            <tr>
                                                    <th>No.</th>
                                                    <th>Status</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Email Address</th>
                                                    <th>Update</th>
                                                    <th>Delete</th>
                                            </tr>';
    $query = "SELECT * FROM users";

and my js is:

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

is it necessary to use a tbody or anything else to do a Filter Table? very thanks!

the problem is when I filter, drop the headers of my table

Because you are basing you filtering on TR.

Try using the following or something like it for your use.

$("#searchUserInput").on("keyup",function() {
    var filterThis = $(this).val().toLowerCase();
    $('.listUserContent').each(function () { //my rows have this class on it
        var filterObj = $(this).data("searchusertitle").toLowerCase(); //my rows have this data-serachusertitle
        (filterObj.indexOf(filterThis) >= 0) ? $(this).removeClass("disable") : 
                                               $(this).addClass("disable"); //my CSS has a class for disable to set display to none
    });
});

It's something that I did a year ago, maybe it's something you can adapt to your needs https://bootstrapstudio.io/forums/topic/issue-in-adding-custom-attributes-to-objects/#post-624

Saj

but not's possible to do an exception for the first <td> ?

I've recreated a mock filter table using your example table and I created my own data to test.

Add a tbody element if you don't have it and give it an ID.

This script worked for me, slightly modified your script.

$(function(){
    $("#myInput").on("keyup", function() {
        var $value = $(this).val().toLowerCase();
        $("#myTableBody tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf($value) > -1)
        });
    });
});

I have tested this to work. Table header rows do not get filtered out, only the tbody rows do. Your original example was saying to filter out trs from the whole table, you needed to specify a different filtering starting point that's why you need a tbody and an ID for it to start filtering from there.

I've tried nth-child and nth-of-type and :not etc... putting an ID on tbody starting the filtering from there seems to be the way to go.

I probably would have used a script like this.

$(function(){
    $("#myInput").on("keyup", function() {
        var $myinput = $(this),
            $value = $myinput.val().toLowerCase();
        $("#myTableBody tr").filter(function() {
            var $this = $(this);
            $this.toggle($this.text().toLowerCase().indexOf($value) > -1)
        });
    });
});

So that $(this) doesn't need to be looked up everytime and I like to keep my variables that are a jQuery object as a jQuery object.

Saj

thanks saj, but not's possible to do an exception for the first tr? I try this to fix my first tr as:

$('table tr:eq(1)').show();

but when I filter my first tr remove it.

It appears that this is working.

$(function(){
    $("#myInput").on("keyup", function() {
        var $value = $(this).val().toLowerCase();
        $("#myTable tr:gt(0)").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf($value) > -1)
        });
    });
});

Or, my more mod'ed one if you like.

$(function(){
    $("#myInput").on("keyup", function() {
        var $myinput = $(this),
            $value = $myinput.val().toLowerCase();
        $("#myTable tr:gt(0)").filter(function() {
            var $this = $(this);
            $this.toggle($this.text().toLowerCase().indexOf($value) > -1)
        });
    });
});

Saj

thank you!!!!

Your welcome, glad I could help :)

Saj