角度データテーブル - 特定のHTMLクラス値を検索する

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>のような内容の列があると思います。 - >http://plnkr.co/edit/hUSZ0XpRDZPjERsr0vF5?p=preview

非常に大きな

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

デモをクリックすることによって呼び出さここ

：あなたはこのようfa-star/fa-star-oで行をフィルタリングする2つのカスタムフィルタを実装することができますこの方法の利点は、フィルタを永続化できることです。フィルタがpop()でない場合、その後、ユーザ検索はフィルタサブセット自体のサブセットになります。たとえば、「お気に入り」内にはすべての行に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