javascript - 根据输入更改触发 DataTable 突出显示和过滤器

Question

描述

我有一张 table

<table id="account-table" class="table display nowrap" cellspacing="0" width="100%">
    <thead>
    <tr class="text-left">
      <th>ID</th>
      <th>Type</th>
      <th>Name</th>
      <th>Email Address</th>
      <th>Action</th>
    </tr>
    </thead>
</table>

这是我的搜索输入框

<input type="text" class="form-control mb20" id="search" placeholder="Search">

---

尝试

我试过这个设置

**include**

<script src="https://cdn.datatables.net/plug-ins/1.10.10/features/searchHighlight/dataTables.searchHighlight.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script>



**settings**

$('#account-table').DataTable({
    data: data,
    deferRender: true,
    paging: true,
    searching: true,
    bLengthChange : false,
    Filter: false,
    Info:false,
    searchHighlight:true,
    iDisplayLength: 10,
});


**trigger the draw while typing**

$('#search').keyup(function(){
  $('#account-table').search($(this).val()).draw();
});

我不确定为什么当我开始在搜索输入框中输入时我的搜索功能不起作用。

控制台有0个错误。

我该如何调试？

Answer 1

您不需要创建自己的搜索框，因为 datatable 会在表格上方为您创建一个搜索框。

您是否看到一个名为:<input type="search" class="" placeholder="" aria-controls="account-table"> 的生成器？ ？

这是一个 JSFiddle，其中包含您的所有代码以及一个有效的过滤器和突出显示:JSFiddle

如果您确实需要使用自己的搜索框，请使用

$('#search').keyup(function(){
  $('#account-table').DataTable().search($(this).val()).draw();
});

它不工作的原因是因为 $('#account-table')返回 jQuery 搜索与该选择器匹配的元素的结果 - 而 DOM 元素没有名为 search 的函数在他们。打电话.DataTable()它会导致 DataTable 返回生成该 DOM 表的表对象。