Angular-DataTables - 搜索特定的 html 类值

Question

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

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

$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-click 星形图标时，我会切换它的值。它最初初始化为false:

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


            };

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

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

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

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

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

Answer 1

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

我想您在第一列中有包含 <i class="fa fa-star-o"></i> 之类的内容的列。您可以实现两个自定义过滤器，通过这种方式过滤掉带有fa-star / fa-star-o 的行：

$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>

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

这种方法的最大优点是可以使过滤器持久化。如果您不是pop() 过滤器，那么随后用户搜索将是过滤器子集本身的子集，例如在“收藏夹”中，所有行都带有fa-star 图标。

Answer 2

我的情况是 data[index] 是空的（不知道为什么）。但我设法让它使用以下功能：

$.fn.dataTable.ext.search.push(
   function (settings, data, index, rowData, counter) {
      return $(rowData[0]).hasClass('fa-star');
   }
);

我将data 替换为rowData 并设法访问了html-object。

此处显示了所需的功能： plnkr.co/edit/PRu8bZI0vO1ocgvjW9oA?p=preview