Angular-DataTables

Question

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

我已经尝试了一些方法来实现这一点，但它不起作用。据我了解，我应该为 header 中的星形图标定义一些 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 函数取自。

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

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

所以我可以使用 search-input 找到 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() 过滤器，那么随后的用户搜索将是过滤器子集本身的一个子集，例如在 "favorites" 中，所有行都带有 fa-star 图标。

Answer 2

我的情况是数据[索引] 为空（真的不知道为什么）。但我设法让它与以下功能一起工作：

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

我用 rowData 替换了 data 并设法访问了 html 对象。

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

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

Angular-DataTables - Searching for a specific html-class value

datatables

angularjs