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

});