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

Posted 2023-05-07

【中文标题】Angular-DataTables - 搜索特定的 html 类值

【英文标题】：Angular-DataTables - Searching for a specific html-class value

【发布时间】：2016-10-28 04:07:08

【问题描述】：

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

我已经尝试了一些方法来实现这一点，但它不起作用。据我了解，我应该为标题中的星形图标定义一些 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://***.com/a/23931504/3402092。

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

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

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

【参考方案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 图标。

【讨论】：

@Sirion，感谢您接受答案！这是自定义过滤器的长镜头，但我认为您会更喜欢它。自己经常使用它来过滤日期范围之间的行，然后用户可以在该范围内搜索，或者在您过滤某些类型的行时。

您的解决方案有效，但不适用于我的情况。我从数据库加载图标为 html，当我检查 data 时，带有图标的列是一个大的空字符串。所以我决定以另一种方式访问​​专栏。但不知何故，我无法同时进行过滤和排序。我用我的箱子创建了一个 plunker，你能看一下吗？ plnkr.co/edit/PRu8bZI0vO1ocgvjW9oA?p=preview。不知何故，这个简单的功能已经花费了我很多时间。

@Sirion，可以等到明天吗？现在是 DK 的 03.16，我一直在喝酒（现在是 DK 的夏季）。我明天（周日）会调查一下

完全没有问题。

好的，我让它工作了。我更新了 plunker，如果你想看看它：plnkr.co/edit/PRu8bZI0vO1ocgvjW9oA?p=preview。 P.S. jQuery 是一团糟。

【参考方案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

【讨论】：

看起来很棒，作为用户，您有直观的感觉，您可以通过单击 ★ 图标进行过滤。