How to add custom search box in jQuery Datatable and place it outisde main Table?

I am using jQuery datatable in my ASP.NET MVC website, now I would like to place this custom search box main jQuery datatable, how can I do that using jQuery?

Asked by:- Vinnu
: 6247 At:- 8/16/2019 12:49:19 PM
jQuery jQuery Datatable custom search

2 Answers
profileImage Answered by:- pika

You can simply create a input textbox and implement search functionality using .search() api of jQuery Datatable.

Suppose search textbox html is as below

<input type="text" id="CustomSearchTextField" />

then you can use the below jquery Datatable code

var oTable = $('#yourTable').DataTable();   //using Capital D, which is mandatory to retrieve "api" datatables' object, latest jquery Datatable
$('#CustomSearchTextField').keyup(function(){$(this).val()).draw() ;

.keyup is used, instead of .keypress, so that you don't experience any delay in results.

If you are using datatable with lowercase d, .dataTable() ( this will return a jquery object ) use this:


Based on your jquery Datatable versions, you can use the above code.

At:- 8/21/2019 12:05:43 PM
I tried the first option as I am using latest Datatable and it worked for me as needed. 0
By : Vinnu - at :- 8/29/2019 3:04:57 PM

profileImage Answered by:- vikas_jk

Above answer works as needed, but if you want to enable jQuery datatable custom filter search using Regular Expression, you can use the below code

var oTable = $('#yourTable').DataTable(); // capital "D"

var input = $('#CustomSearchTextField');

input.unbind('keyup search input').bind('keypress', function (e) {
    if (e.which == 13) {
        var keywords = input.val().split(' '),
            filter = '';
        for (var i = 0; i < keywords.length; i++) {
            filter = (filter !== '') ? filter + '|' + keywords[i] : keywords[i];
        //true (param 2) turns regex on, false (param 3) turns smart search off, true, false).draw();
At:- 3/10/2021 3:57:22 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use