DataTable is a very powerful plugin of javascript/jquery for data rendering, filtering etc. I want to share few DataTable techniques to customize the DataTable search box. In this article, you will understand how can you operate the search box outside the DataTable and how to hide DataTable search box.

If you want to remove/hide DataTable search box then there are two techniques.

Hide DataTable Search Using CSS

$(".dataTables_filter").hide();

Remove/Disable DataTable Search Using DataTable Params

Remember, default search value is “true”;

$('#example').dataTable( {
 "searching": false
} );

HTML Code with Bootstrap Search Box UI Code

If you want to operate DataTable search box outside the DataTable.
<div class="row">
 <div class="col-lg-6">
 <div class="input-group">
 <input type="text" class="form-control" id="bookSearch" placeholder="Search book...">
 <span class="input-group-btn">
 <button class="btn btn-info btn-flat" type="button">Go!</button>
 </span>
 </div><!-- /input-group -->
 </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

JQuery code to bind outside search with DataTable

var table = $('#example').DataTable();
 $('#bookSearch').keyup(function(){
 table.search($(this).val()).draw() ;
 })

Thank you for reading the article. If you have any query then please post comments.

Regards