CODEWITHSUNDEEP
twitter-bootstrapsearchdatatablecontainers
Dâniel Fraga
Dâniel Fraga

Reputation: 143

How to move dataTables search box inside Bootstrap container? JSFiddle included

I want to move the dataTables search box inside the Bootstrap container. It works OUTSIDE the container, but not inside the container. Take a look at the jsfiddle:

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

Search (works!) : <input type="text" id="searchbox">
<div class="container">
Search inside container (fail): <input type="text" id="searchbox">

Upvotes: 2

Views: 2988

Answers (2)

user2492162
user2492162

Reputation: 13

Declare a span with a class

<span id="searchFilter"></span>

then you can set your filter box in this using this

Add this in document ready function

$('div.dataTables_filter').appendTo(".searchField");

this will work out. Have a try. Thanks.

Upvotes: 1

ondrc
ondrc

Reputation: 106

The example does not work because of duplicate IDs. See this question.

The jquery call

$("#searchbox").keyup(function() { ... })

actually binds the function as keyup event handler to the first element with id searchbox.

Remove other elements with searchbox id or turn searchbox to class and update jquery selector to select elements by class:

markup:

...
Search (works!) : <input type="text" class="searchbox">
<div class="container">
Search inside container (fail): <input type="text" class="searchbox">
...

javascript:

...
$(".searchbox").keyup(function() {
...

Upvotes: 1

Related Questions