Jquery Datatable 搜索框重新定位

Posted 2023-03-10

【中文标题】Jquery Datatable 搜索框重新定位

【英文标题】：Jquery Datatable search box reposition

【发布时间】：2015-05-21 03:43:55

【问题描述】：

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

我该怎么做？

【参考方案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">

JS

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

原文出处Datatables - Search Box outside datatable