Description
I currently have a table in my HTML code that looks like this:
<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>
Additionally, I have included a search input box:
<input type="text" class="form-control mb20" id="search" placeholder="Search">
Attempt
In an attempt to enable search functionality for my table, I tried the following settings and scripts:
**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();
});
Despite implementing these settings, the search functionality does not seem to be working as intended when typing in the search input box.
No errors are appearing in the console. How can I go about debugging this issue?