触发DataTable高亮显示并根据输入更改进行过滤

Question

描述

我有桌子

<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

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

您是否看到一个生成的称为：<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表的表对象。