How to move search box to another place in the page? JSFiddle included.

DanielFragaBR

I googled a lot before asking this and I noticed this is a frequent doubt.

How can I move the search box to another place in the page? I want to put it inside the Bootstrap navbar just like was asked here:

http://stackoverflow.com/questions/23724076/how-to-customize-bootstrap-datatable-search-box-and-records-view-position

So is there a simple way? Thanks.

Ps: I update this post with a fiddle to better illustrate the problem.

http://jsfiddle.net/DanielFragaBR/ALNvR/

Rpiechura

The simplest way would be to make your own search, hook it up, and turn off the one that already exists. Either that or I'm fairly certain you could move it around in the dom using Jquery (Although I've never tried so I may be wrong). You can move the search bar around inside of the dataTables_wrapper by changing where inside the 'dom' argument is, beyond that I don't think there is a way of moving it.

DanielFragaBR

Hi! I did a fiddle to illustrate better. The same search box that works outside Bootstrap container will not work inside the container:

http://jsfiddle.net/DanielFragaBR/ALNvR/

Rpiechura

You can't have multiple items with the same ID. Jquery will only return the first item that matches, so since you had 3 items with all the same Id it found the first one to work and returned it. If you rename them to be Searchbox 1, 2 and 3 than the filter will work with all 3 of them (after changing the selector obviously).

DanielFragaBR

Rpiechura thank you very much! Excellent answer! ;)