Jquery Datatable 搜索框重新定位答案

【问题标题】：Jquery Datatable search box repositionJquery Datatable 搜索框重新定位
【发布时间】：2015-05-21 03:43:55
【问题描述】：

我想在 jquery 数据表之外重新定位过滤器框。我想要完全一样：

我该怎么做？

【问题讨论】：

标签： jquery css jquery-datatables jquery-datatables-editor

【解决方案1】：

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

$("#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/

【讨论】：

【解决方案2】：

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

查看有关此的 Datatables API 文档。

例子：

HTML

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

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

原文出处Datatables - Search Box outside datatable

【讨论】：