数据表搜索单击元素

Question

我已经使用数据表作为表。

$('#tableid').dataTable({ 
    "aLengthMenu": [ 
    [2, 5, 7, -1], 
    [2, 5, 7, "All"] 
    ], 
    "iDisplayLength": 5 
}); 

和我如果点击任何div元素我希望在数据表中搜索div元素的值。

<div id="search> 
    <a href="">this</a> 
</div> 

如果我点击这个'''在表中搜索'，这可以实现？

$(document).on('click','#search',function(e) 
{ 
    e.preventDefault(); 
    var search=$('#search').val(); 

} 

Answer 1

使用搜索（）的数据表功能来搜索手动

<script> 
     var table = $('#tableid').dataTable({ 
      "aLengthMenu": [ 
      [2, 5, 7, -1], 
      [2, 5, 7, "All"] 
      ], 
      "iDisplayLength": 5 
     }); 

$(document).on('click','#search',function(e) 
    { 
     e.preventDefault(); 
     var search =$('#search').text(); 
     table.search(search).draw(); 
    } 
</script> 

    <div id="search> 

    </div> 

Answer 2

<script type="text/javascript"> 
    $(document).ready(function() { 
     var table = $('#example').DataTable({// or .dataTable({ for version under 1.10 
      "aLengthMenu": [ 
       [2, 5, 7, -1], 
       [2, 5, 7, "All"] 
      ], 
      "iDisplayLength": 5 
     }); 
     // it is more efficient to bind the click event not on body rather only on the needed elements 
     // you can use class name for selector if you want to use it on more divs 
     $('.search').click(function(e) 
     { 
      e.preventDefault(); 
      // you need to trim the given value because it can contain whitespace characters which can result false filtering 
      var search = $.trim($(this).text()); 
      table.search(search).draw(); 
     }); 
    }); 
</script> 
<div class="search"> 
    <a href="#">this</a> 
</div> 
<div class="search"> 
    <a href="#">that</a> 
</div>