As the title indicates, I am in the process of developing a custom search box for the DataTables JQuery plugin. The default options do not suit my needs, and configuring the DOM is also not ideal as I aim to integrate it within a table row for display purposes.
So far, this is the HTML snippet I have:
<th>Search by plan name and number :<br><input type="text" id="searchbox"></th>
For the script that initializes DataTables, here's what I have:
<script>
$(document).ready(function() {
var dataTable = $('#table_id').DataTable( {
"dom": '<"top"f>rt<"bottom"lp>' // Adjusting default locations
});
// Custom search box
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
});
</script>
In addition, I made changes to the CSS to remove the default search box:
.dataTables_filter {
display: none;
}
However, when I type in my custom search box, nothing seems to happen. Any suggestions or tips on how to troubleshoot this issue?
P.S: I'm also looking to reposition the page selector and the "Showing # out of #" information. If anyone has insights on how to relocate or recreate these elements (similarly to the search bar), please share your thoughts. Thank you!