クリック可能な要素のデータ検索

Question

私はテーブル用のデータテーブルを使用しました。

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

とdiv要素をクリックすると、datatable.e.gでdiv要素の値を検索します。

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

これをクリックすると、「this」が検索されます。これはどのように達成できますか？検索データテーブル用

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