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 () {
    dt.search(this.value).draw();
});

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.