jquery - Jquery Datatable 搜索框重新定位

Question

我想在 jquery 数据表中重新定位过滤器框。我想完全喜欢这样：

我该怎么做？

Answer 1

只需将#<table_id>_filterdiv 重新定位到所需位置，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/

Answer 2

您可以使用 DataTables api 来过滤表格。因此，您所需要的只是您自己的输入字段，其中包含一个触发 DataTables 过滤功能的 keyup 事件。使用 css 或 jquery，您可以隐藏/删除现有的搜索输入字段。或者也许 DataTables 有一个设置来删除/不包含它。

查看有关此的 Datatables API 文档。

例子：

HTML

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

JS

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

原始源数据表 - 数据表外的搜索框