Changing DOM Element Position of searchbox in datatables

问题

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.

回答1:

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();
});

回答2:

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"));

回答3:

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() );
     });
 });

回答4:

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.

回答5:

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

Hide the default search box (CSS):
```
.dataTables_filter { display: none; }
```

Add new filter to your desired place (HTML)

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

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.

回答6:

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.

回答7:

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