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

Question

Description

I have a 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>

Here is my search input box

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

---

Attempt

I've tried this settings

**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();
});

I'm not sure why my search functionality is not working when I start typing the search input box.

There is 0 error in the console.

How can I debug this?

Answer 1

You shouldn't need to create your own search box, as datatable will create one for you above the table.

Are you seeing one generated called: <input type="search" class="" placeholder="" aria-controls="account-table"> ?

Here's a JSFiddle with all your code and with a working filter and highlight: JSFiddle

If you DO need to use your own search box, then use

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

The reason it wasn't working was because $('#account-table') returns jQuery's results from its search for elements matching that selector - and DOM elements don't have functions called search on them. Calling .DataTable() on it causes DataTable to return the table object that produced that DOM table.