Angular-DataTables-搜索特定的html类值 [英] Angular-DataTables - Searching for a specific html-class value

问题描述

我想按属性类名称过滤数据表。这是一些图片。想法是，单击表标题附近​​的星形图标以仅显示最喜欢的条目。

I would like to filter datatable table by a attribute class name. Here is some image. The idea is, to click on the star icon near the table header to show only entries, which are favorite.

我已经尝试了一些方法来实现此目的，但是它不起作用。据我了解，我应该为标题中的星形图标定义一些 keyup -listener。这是我现在使用的一些代码：

I already tried some options how to achieve this, but it doesn't work. As I understood, I should define some keyup-listener for the star icon in the header. Here is some code I used by now:

$scope.dtInstanceCallback = function (dtInstance) {
                var table = dtInstance.DataTable;

                // Apply the search
                table.columns().eq(0).each(function (colIdx) {
                    if ($('i', table.column(colIdx).header())[0] != undefined) {
                        $('i', table.column(colIdx).header()).on('keyup', function () {
                            if ($scope.showFavorites) {
                                table
                                    .column(colIdx)
                                    .search('fa-star', false, false, true)
                                    .draw();
                            } else {
                                //here drop the search by the star value drop search
                            }
                        });
                    }
                });
            };

$ scope.showFavorites 只是一个包含 true 或 false 的变量。当我 ng点击星形图标时，会切换其值。最初使用 false 初始化：

The $scope.showFavorites is just a variable containing true or false. I switch it's value when I ng-click the star icon. It's initially initialized with false:

$scope.showFavoriteOnly = function () {
                $scope.showFavorites = !$scope.showFavorites;


            };

一个小问题是不要使用智能搜索，因为这两个图标（全星和空星）仅以字母区分： fa-star 和 fa-star-o 。

A little problem is to no use the smart search, because the both icons (full star and empty star) differentiate only by a letter: fa-star and fa-star-o.

.search 函数取自 https ：//stackoverflow.com/a/23931504/3402092 。

小修改：我将该列标记为搜索类型字符串：

Little Edit: I marked the column as search type string:

DTColumnDefBuilder.newColumnDef(0).withOption('orderDataType', 'fa-classes').withOption('sType', 'string')

所以我可以使用搜索输入来找到 fa-star-o 。

So I can use the search-input to find fa-star-o.

推荐答案

我有一种感觉，那就是您真正要寻找的东西是 自定义过滤器 。定制过滤器是定制的搜索/过滤器，可以是动态的（作为常规搜索）或永久的，这意味着后续搜索将是该定制过滤器的子集，直到被删除。

I have the feeling, that what you really are looking for is a custom filter. A custom filter is a customized search / filter that can be either dynamic (as a regular search) or permanent, which mean that subsequent searches will be a subset of that custom filter, until it is removed.

我想您有一些列，其内容类似于< i class = fa fa-star-o< / i> 在第一列中。您可以实现两个自定义过滤器，它们使用 fa-star / fa-star-o 来过滤行： / p>

I imagine you have columns with content like <i class="fa fa-star-o"></i> in the first column. You can implement two custom filters that filters out rows with fa-star / fa-star-o this way :

$scope.starFilter = function() {
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {         
      return $(data[0]).hasClass('fa-star')
    }    
  )
  $scope.dtInstance.DataTable.draw()
  $.fn.dataTable.ext.search.pop() //remove this line to make the filter persistent
}

$scope.starOFilter = function() {
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {         
      return $(data[0]).hasClass('fa-star-o')
    }    
  )
  $scope.dtInstance.DataTable.draw()
  $.fn.dataTable.ext.search.pop() //remove this line to make the filter persistent
}

点击按钮即可调用

<button ng-click="starFilter()">star filter</button>

demo-> http://plnkr.co/edit/hUSZ0XpRDZPjERsr0vF5?p=preview

demo -> http://plnkr.co/edit/hUSZ0XpRDZPjERsr0vF5?p=preview

这种方法的最大优点是可以使过滤器持久化。如果您不是 pop（）过滤器，则随后的用户搜索将是过滤器子集本身的子集，例如在收藏夹中，所有带有<$ c $的行c> fa-star 图标。

The very great advantage of this approach is that you can make the filter persistent. If you not pop() the filter then subsequently user searches will be a subset of the filter subset itself, for example within "favorites", all rows with a fa-star icon.

这篇关于Angular-DataTables-搜索特定的html类值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！