Jquery 数据表搜索框重新定位

Question

我想在 jquery 数据 table 中重新定位过滤框。我想完全像这样：

我应该怎么做？

Answer 1

您可以使用 DataTables api 来过滤 table。因此，您所需要的只是您自己的输入字段，其中包含一个 keyup 事件，该事件会触发对 DataTables 的过滤功能。使用 css 或 jquery 您可以 hide/remove 现有的搜索输入字段。或者也许 DataTables 有一个设置为 remove/not-include 它。

查看数据tables API 文档。

示例：

HTML

<input type="text" id="myInputTextField">

JS

oTable = $('#myTable').dataTable();
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

原始来源Datatables - Search Box outside datatable

Answer 2

只需将 #<table_id>_filter div 重新定位到 detach().appendTo() 所需的位置，如下所示：

$("#example").DataTable({
    initComplete : function() {
        $("#example_filter").detach().appendTo('#new-search-area');
    }
});

您甚至可以设计搜索过滤器框在重新定位的位置的显示方式：

#new-search-area {
    width: 100%;
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
}
#new-search-area input {
    width: 600px;
    font-size: 20px;
    padding: 5px;
}

演示 -> http://jsfiddle.net/dq2bmgd9/

Jquery 数据表搜索框重新定位

Jquery Datatable search box reposition

css

jquery

jquery-datatables

jquery-datatables-editor