CODEWITHSUNDEEP
jquerydatatables
jessi
jessi

Reputation: 333

How to get value entered in search box In Datatables

How to get value entered in search box In Datatables. Is there a way to get value entered in search box in Data Tables?

Upvotes: 32

Views: 90785

Answers (7)

Merrin K
Merrin K

Reputation: 1790

Try This

var searchBoxText = $('#DataTable_Id'+'_filter input').val();
alert(searchBoxText);

Upvotes: 0

Kevin
Kevin

Reputation: 1

Add this code in Javascript under Datatable code ;

$('input').keyup(function() {
    var table = $('#example').DataTable();
});

If still not working, Add none display span element next to the input you want to search

 <td>
      <input class="form-control" value="{{Value}}">
      <span style="display:none"> {{Value}} </span>>
    </td>

Replace value and span inner text must be the same! That is.

Upvotes: 0

Peter Chaula
Peter Chaula

Reputation: 3711

Yes, there is. You call the search method without an argument to get the search term

var query = dataTable.search()

https://datatables.net/reference/api/search()

Get the currently applied global search. If there is more than one table in the API's context, the search term of the first table will be returned. Use table() if you require the search term of a different table in the API's context.

Upvotes: 30

Jasbin Karki
Jasbin Karki

Reputation: 614

you can do something like this works for all datatable version what we are doing here is tracking the search input field and then getting its value only no need to use datatable api using this method

$('input[type="search"]').on( 'keyup', function () {
            console.log($(this).val());
} );

Upvotes: 1

Rock
Rock

Reputation: 584

Try this function to detect the key press and then draw the DataTablee.

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

Upvotes: 0

Herbi Shtini
Herbi Shtini

Reputation: 2040

As mentioned in dataTable api

    var table = $('.datatable').DataTable();


     $('.datatable').on('search.dt', function (e, settings) {
       table.search( this.value ).draw();
    })

    //or custom input
    // #myInput is a <input type="text" id="myInput"> element
    $('#myInput').on( 'keyup', function () {
        table.search( this.value ).draw();
    });

Upvotes: 3

davidkonrad
davidkonrad

Reputation: 85528

If you just want to check the value when a search is performed [dataTables 1.10.x] :

var table = $('#example').DataTable();

$('#example').on('search.dt', function() {
    var value = $('.dataTables_filter input').val();
    console.log(value); // <-- the value
});

if you want to check the value before the search, and be able to cancel the search, you must unbind the default searchbox event and create your own, like this - search only when the user has entered more than 3 characters :

$('.dataTables_filter input').unbind().keyup(function() {
    var value = $(this).val();
    if (value.length>3) {
        table.search(value).draw();
    } 
});

demo -> http://jsfiddle.net/pb0632c3/

To reset the search / filter completely, like if the user has deleted the search term :

if (value.length==0) table.search('').draw();

Upvotes: 50

Related Questions