描述

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元素没有名为{{1}的函数} 在他们。在其上调用search会导致DataTable返回生成该DOM表的表对象。

Trigger DataTable根据输入变化突出显示和过滤

描述

尝试

问题

1 个答案: