how to filter the table by column?

Question

I want to filter my table by specific column

So far, I've tried:

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

This is the html

   <tr ng-repeat="voucher in vauchers | orderBy:'-time_for_order'">
                <td>{{voucher.creator_id}}</td>
                <td>{{voucher.use_time}}</td>
                <td>{{voucher.use_date}}</td>
                <td>{{voucher.is_used}}</td>
                <td>{{voucher.package_type}}</td>
                <td>{{voucher.phone}}</td>
                <td>{{voucher.create_time}}</td>
                <td>{{voucher.create_date}}</td>
                <td>{{voucher.vaucher_type}}</td>
                <td class="idTd">{{voucher.id}}</td>
            </tr>

When i type now at #myInput , raws that not match my query at any of the columns are not visible. My wish is to success filter only check the one column , as example filter by creator_id= 3;

Answer 1

This should be what you're looking for:

Refer the documentation here on how to use the overloaded form of jQuery filter .

HTML: Add the `filterColumn` css class to the column based on which you want to filter
    <tr ng-repeat="voucher in vauchers | orderBy:'-time_for_order'">
       <td class="filterColumn">{{voucher.creator_id}}</td> <!--added CSS class-->
       <td>{{voucher.use_time}}</td>
       <td>{{voucher.use_date}}</td>
       <td>{{voucher.is_used}}</td>
       <td>{{voucher.package_type}}</td>
       <td>{{voucher.phone}}</td>
       <td>{{voucher.create_time}}</td>
       <td>{{voucher.create_date}}</td>
       <td>{{voucher.vaucher_type}}</td>
       <td class="idTd">{{voucher.id}}</td>
    </tr>

JavaScript:
    $("#myInput").on("keyup", function() {
      var searchKeyword = $(this).val().toLowerCase();
      $("#myTable tr").filter(function(index, element) {
        return $(element)        
           .children('.filterColumn')
           .text().toLowerCase().indexOf(searchKeyword) != -1;
      });
    });

This will always filter based on the column containing the css class filterColumn , which in this case is creator_id .