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>

如果我点击这个，就会在表格中搜索“这个”。如何实现？

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

}

Answer 1

使用search（）函数手动搜索数据表

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

数据表搜索点击的元素

2 个答案: