jQuery dataTables changing the input search

Question

The default HTML generated by the plugin dataTables for the search input is the following:

<div id="projects_table_filter" class="dataTables_filter">
    <label> 
            Search: <input type="search" class="" placeholder="" aria-controls="projects_table">
    </label>
</div>

I would like to change the content inside the class dataTables_filter and still be able to search.

$(function(){
    if($('.dataTable').length > 0){
        $('.dataTable').dataTable({
            "bFilter": true,
        });

        $('.dataTables_filter').empty(); // clears the content generated    
        $('.dataTables_filter').append("<div class='input-group' style='width: 250px'>" + 
                                       "    <input type='search' class='form-control' placeholder='Search..'/>" +
                                       "    <span class='input-group-addon'>" +
                                       "        <i class='fa fa-search' style='width: 15px; padding-left: 5px'></i>" +
                                       "    </span>" +
                                       "</div>")
    }
});

After "re-code" the div, the content is:

<div id="projects_table_filter" class="dataTables_filter">
    <div class="input-group" style="width: 250px">  
        <input type="search" class="form-control" placeholder="Search..">   
            <span class="input-group-addon">        
                <i class="fa fa-search" style="width: 15px; padding-left: 5px"></i> 
            </span>
        </div>
    </div>
</div>

But it does not work. I'm wondering if I have to activate the functionality again? But if so, how?

EDIT 1: I'm currently creating a JSFiddle.

EDIT 2: http://jsfiddle.net/fiddlefan/1bLyfbw9/

An alternative approach would be to use the sDom property to hide the default search input. Add your own and use fnFilter() to perform a search. — markpsmith
– markpsmith, Commented Aug 7, 2014 at 10:18
Tried to do something with fnFilter() but I get undefined in console. $(document).on('keyup', "input[type='search']", function(){ $('.dataTable').fnFilter($(this).value); }); — Linesofcode
– Linesofcode, Commented Aug 7, 2014 at 10:26

Linesofcode · Accepted Answer · 2014-08-07 10:29:20Z

4

Solved, here's the solution:

$(document).on('keyup', "input[type='search']", function(){
    var oTable = $('.dataTable').dataTable();
    oTable.fnFilter($(this).val());
});

answered Aug 7, 2014 at 10:29

Linesofcode

6,02114 gold badges72 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery dataTables changing the input search

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related