Clicked divのデータ型検索

Question

このようにカテゴリを取得しています。

<?php foreach($categories as $category):?> 
    <div id="search"><a href=""><?php echo $category->category;?></a></div></a> 
<?php endforeach;?> 

これは私にカテゴリを与える

​​

私はデータテーブルを使用してクリックするカテゴリを検索しようとしています。 私がラップトップをクリックすると、テーブル内の「ラップトップ」を検索するデータテーブル検索機能が利用できます。 のJavaScript：

var table=$('#tableid').DataTable(); 
$(document).on('click','#search',function(e) 
{ 
     e.preventDefault(); 
     var search = $('#search').text(); 
     table.search(search).draw(); 
}); 

しかし、私は上をクリックし方カテゴリのみ最初のカテゴリが検索されます。例えば「ファッション」をクリックすると、「携帯電話」が検索されています。私がdiv idをクラスに変更すると、すべてのカテゴリがすぐにsearch.e.gを検索しようとしている検索ボックスに表示されます。テーブル内で「Mobile PhonesLaptopsFashionBooks ..」のカテゴリをクリックすると検索されます。

Answer 1

​​を使用してデータテーブルをフィルタリングすることができます。あなたがする必要があることの1つは、にデータテーブルsearchingを設定する必要があるということです。対応するdivをクリックすると、データテーブルをフィルタリングするサンプルを作成しました。参考のため、このFiddle

HTML

<table id="dataTable" class="display" cellspacing="0" width="100%"> 
<thead> 
    <tr>     
     <th>Id</th> 
     <th>Name</th> 
     <th>Category</th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 

をチェック

CSS

.search { 
    border-radius: 2px; 
    background: #73AD21; 
    margin-bottom : 10px; 
    width: 100px; 
    height: 20px; 
} 

JS

$(document).ready(function() { 
var table = null; 

    function createDatatable() { 
    table = $('#dataTable').dataTable({ 
     bFilter: false, 
     bLengthChange: false, 
     searching : true, 
     "sDom": 'lfrtip', 
     pagingType: 'full', 
     "oLanguage": { 
      "oPaginate": { 
       "sFirst": "<b><<</b>", 
       "sLast": "<b>>></b>", 
       "sNext": "<b>></b>", 
       "sPrevious": "<b><</b>" 
      } 
     } 
    }); 
    } 

    createDatatable(); 

//creating a temp json. you will get this from server side after ajax call 
var jsonString = '[{"Id": 1,"Name": "Sony Vaio","Category": "Laptops"},{"Id": 2,"Name": "Samsung Galaxy","Category": "Mobile Phones"},{"Id": 3,"Name": "Dell","Category": "Laptops"}]'; 

     var data = JSON.parse(jsonString); 
     for(i=0; i<data.length;i++) { 
       $('#dataTable').dataTable().fnAddData([ 
       data[i].Id, 
      data[i].Name, 
      data[i].Category 
     ]); 
     } 

$(document).on('click','.search',function(e) 
{ 
     var search = $(this).text(); 
     table.fnFilter(search.trim()); 
}); 

});