Question

search input插件dataTables生成的默认HTML如下：

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

我想更改班级dataTables_filter内的内容，但仍然可以搜索。

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

在重新编码div后，内容为：

<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>

但它不起作用。我想知道我是否必须再次激活该功能？但如果是这样，怎么样？

编辑1 ：我正在创建一个JSFiddle。

编辑2 ：http://jsfiddle.net/fiddlefan/1bLyfbw9/

Answer 1

解决了，这是解决方案：

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

jQuery dataTables改变了输入搜索

1 个答案: