27

Actually I am new to jQuery datatables plugin.

I have attached the plugin to my tables using this method using this code.

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

Now What I want is datatables provides a text box in which we can enter our filter string and results will be getting filtered.

So I want to use my existing designed textbox for that purpose I don't want to add a new textbox in the UI. So I gone through this link

http://datatables.net/examples/basic_init/dom.html

But I am not understanding. Is it possible to use the existing textbox. Please advice

See I was having situation like this before implementing this datatables

enter image description here

Now when I apply this datatables plugin A new text box gets added for search I don't want to a new text box I want my existing textbox to implement search functionality.

Improve this question
3
  • So you want the existing textbox not to do filtering? Commented Oct 9, 2013 at 14:06
  • 1
    @Danny I want the existing textbox to filtering functionality But I don't want a new textbox...... Means I want search functionality in the textbox which I have before implementing datatables. Commented Oct 9, 2013 at 14:16
  • Seems that dt-search is the element id now, and not dataTables_filter Commented Oct 28, 2024 at 15:56

8 Answers 8

Reset to default
65

This is very simple. First you must hide the default search box :

.dataTables_filter {
   display: none;
}

Example of your own designed search box, placed somewhere in the HTML :

<input type="text" id="searchbox">

script to search / filter when typing in the search box

$("#searchbox").keyup(function() {
   dataTable.fnFilter(this.value);
});

working demo -> http://jsfiddle.net/TbrtF/

If you are using DataTables 1.10 the JS should look like:

$("#searchbox").on("keyup search input paste cut", function() {
   dataTable.search(this.value).draw();
});
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Instead of hiding the default search box you can completely remove it by setting the bFilter: false in the datatable constructor. EDIT: That disabled the custom search boxes as well so it doesn't work after all...
@SimonBengtsson, Yes, bFilter : false completely suppress the filtering capabilities.
To get closer to the way the filter box works in DataTables, you can add more event bindings to your input: $("#searchbox").bind('keyup search input paste cut', function () {...});
@RyanKohn, Yes, but most important, you are not "slave" to the dataTables-way. Very convenient to implement a search that only is triggered when the user hits enter, for example.
Instead of hiding the default filter with css you can omit the f letter in the dom option which remove the input completly. An example can be found in the docs.
|
18

You can define a new element newSearchPlace to have the data table search filter inside:

<div id="newSearchPlace"></div>

Then put the search filter inside this new place:

$("#newSearchPlace").html($(".dataTables_filter"));
Improve this answer

2 Comments

This answer is really underrated. This worked best for having 20+ dynamically generated datatables in my case,. The other options caused excessive events to be fired even with unbind() and caused weird slowness as the highest upvoted answer caused well over 10 events per keystroke.
Best solution also for multiple tables on same page !
7

To remove the filter options you can use css as mentioned in other answers or you can remove it in the initialisation of the datatable using:

$("#table").dataTable({"bFilter": false}); //disables filter input

or by using sDom attribute like this:

 "sDom": '<"H"lr>t<"F"ip>' //when bJuery is true

See here http://datatables.net/usage/options#sDom for more options.

Now about using your own text field as a filter box then just attach a keypress handler to it, and use the fnFilter option like this:

$(document).ready(function() 

     oTable = $('#table_id').dataTable({
         "sDom": '<"H"lr>t<"F"ip>' 
     });
     $('#myInputTextField').keypress(function(){
         oTable.fnFilter( $(this).val() );
     });
 });
Improve this answer

3 Comments

"bFilter": false disables the search / filter capabilities completely, not just hiding the default search box - so that is an odd answer to a question where the goal is to have filter capabilities, just on another text box. Also,sDom is useless / irrelevant in this context - apparently it cannot be said too often : sDom is for setting the order and position for dataTables generated elements, nothing else!
Yes you are right about the bFilter, i noted that in my answer that it disables the functionality. Now about the sDom, by removing the f from the expression, the filter disappears (datatables.net/release-datatables/examples/basic_init/dom.html).
It is only the case if you actually use sDom, which is not nessecary. And there is no sDom present in question. In fact, OP writes "...using this code" -> and an empty initialization part.
1

you can change the style of the search input very easy with css

in css File: 

.dataTables_filter input {
     background: blue;
}

With Javascript

$(".dataTables_filter input").css({ "background" :"blue" });

Try it by paste this to your console.

Improve this answer

Comments

1

For the actual version in Dec 2018 (v1.10.19) you need to do this steps:

  1. Hide the default search box (CSS):

    .dataTables_filter { display: none; }

  2. Add new filter to your desired place (HTML)

    Search:<br><input type="text" id="searchFilter">

  3. After your DataTables inicialisation function you need to write your search function (JS):

    $(document).ready(function() {
   var table = $('#example').DataTable();

$('#searchFilter').on( 'keyup', function () {
   table.search( this.value ).draw();
} );

Note: fnfilter is deprecated, so use search(), but search() doesn't redraw the table, so you need to use draw() too.

Improve this answer

2 Comments

Hi, just wanna know, where is the file location in datatables folder in stored locally that need to change for .dataTables_filter { display: none; } ?
sorry, please ignore above comment, just find where to put .dataTables_filter { display: none; } cheers.
1

As of DataTables 1.10, a dom property can be added to the initialization. Although it is quite hard to master, it can be used to wrap all of the DataTables objects within <div> elements to style the built-in table control elements.

A dom property like the following would wrap the default search bar with a <div> of your choice, which can be used to pull left (where f is the filtering/search bar and t is the table:

$('#example').dataTable( {
  "dom": '<"pull-left" f><t>'
} );

Output:

<div class="pull-left">
  <div id="example_filter" class="dataTables_filter"><label><input type="search" aria-controls="example"></label></div>
</div>
<div>
  <table id="example" class="table dt-responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;" role="grid">
</div>

More info: DataTables dom option

Improve this answer

Comments

0

Yes you can make a class in your css like:

.pull-left{
    float: left !important;
}

and then add this class to datatable search div using jquery or javascript.

example:

$('.dataTables_filter').addClass('pull-left');

make sure your script is in the head part of your html.

Improve this answer

Comments

0

The JavaScript Code is "dom": '<"top"f>rt<"bottom"><"clear">',

and CSS div.dataTables_wrapper div.dataTables_filter{ text-align: left; }

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.