Jquery Datatable搜索框重新定位

Question

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

我该怎么做？

Answer 1

只需将#<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;
}

演示 - ＆gt;的 http://jsfiddle.net/dq2bmgd9/

Answer 2

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

在此处查看Datatables API文档。

示例：

HTML

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

JS

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

原始来源Datatables - Search Box outside datatable