jQuery Datatables Use Custom Search Box/Element

July 9th, 2019

Datatables is a great way to visualize and interact with data without having to code your own solutions.

Recently I attempted to create a SQL table visualizer using Datatables. It worked perfectly for me, but I didn’t like the look or positioning of the default search box. I couldn’t find a way to make it disappear.

As it turns out the solution is simple, requiring only a few edits to your DataTables object initialization and one more javascript line.

Add the below line to your data tables object:

var dt = $('#orders').DataTable(
    "dom": 'lrtip'

This edit makes it so that the search element does not show up. In addition, to make a different element usable as the search box, insert the following code somewhere in the page:

$('#bettersearch').on('keyup', function () {

Now, when a new input is entered in a textbox with the id=”bettersearch”, it will immediately begin narrowing the results as though you were typing in the original search box.


Leave a Reply

Your email address will not be published. Required fields are marked *