CODEWITHSUNDEEP
jquerydatatabledatatables
Linesofcode
Linesofcode

Reputation: 5891

jQuery dataTables changing the input search

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/

Upvotes: 1

Views: 13873

Answers (1)

Linesofcode
Linesofcode

Reputation: 5891

Solved, here's the solution:

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

Upvotes: 4

Related Questions