Sirion Sirion - 5 months ago 82
AngularJS Question

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

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.

enter image description here

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 http://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

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.

Comments