Jquery Datatable搜索框重新定位

Question

我想把筛选框移出jQuery数据表格，让它看起来像这样：。请问我该怎么做？

- Top25

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

- davidkonrad

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 - 在数据表格外的搜索框

- Alupotha