Question

我想按特定列

过滤我的表格

到目前为止，我已经尝试过了：

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

这是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>

当我现在在#myInput处输入时，在任何列上与我的查询不匹配的原始数据都不可见。我希望成功过滤只检查一列，例如按creator_id = 3;

过滤

Answer 1

这应该是您正在寻找的：

请参阅文档here，了解如何使用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;
      });
    });

这将始终根据包含css类filterColumn的列进行过滤，在本例中为creator_id。

如何按列过滤表格？

1 个答案: