Datatables搜索點擊的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更改爲class，所有類別一次都在搜索框中嘗試搜索.e。如果我在表中搜索任何類別的'Mobile PhonesLaptopsFashionBooks'。

Answer 1

您可以使用​​來過濾數據表。有一件事你需要做的是你必須將數據表searching屬性設置爲true。當你點擊相應的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()); 
}); 

});