Question

我想通过属性类名过滤数据表。这是一些图像。我们的想法是，点击表格标题附近的星形图标，只显示最喜欢的条目。

我已经尝试了一些选项如何实现这一点，但它不起作用。据我所知，我应该为标题中的星形图标定义一些keyup - 监听器。这是我现在使用的一些代码：

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

演示 - ＆gt;的 http://plnkr.co/edit/hUSZ0XpRDZPjERsr0vF5?p=preview

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

Answer 2

我的情况是数据[索引]是空的（不知道为什么）。但我设法使用以下功能：

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

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

2 个答案: