Angular-DataTables - Searching for a specific html

Question

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.

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
                            }
                        });
                    }
                });
            };

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;


            };

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.

The .search function has been taken from 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')

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

Answer 1

I my case the data[index] was empty (don't really know why). But I managed to get it working with following function:

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

I replaced data with rowData and managed to access the html-object.

The desired functionality is shown here: plnkr.co/edit/PRu8bZI0vO1ocgvjW9oA?p=preview

Answer 2

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

Here invoked by a button click

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

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

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.