javascript - 更改数据表中搜索框的 DOM 元素位置

Question

实际上我是 jQuery 数据表插件的新手。

我已使用此代码使用此方法将插件附加到我的表格。

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

现在我想要的是 datatables 提供一个文本框，我们可以在其中输入我们的过滤字符串，结果将被过滤。

所以我想为此目的使用我现有的设计文本框，我不想在 UI 中添加新的文本框。所以我浏览了这个链接

http://datatables.net/examples/basic_init/dom.html

但是我不明白。是否可以使用现有的文本框。请指教

看到我在实现这个数据表之前遇到过这样的情况

现在，当我应用此数据表插件时，会添加一个新的文本框用于搜索，我不想要新的文本框，我希望我现有的文本框实现搜索功能。

Answer 1

这很简单。首先，您必须隐藏默认搜索框:

.dataTables_filter {
   display: none;
}

您自己设计的搜索框示例，放置在 HTML 中的某处:

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

在搜索框中输入时搜索/过滤的脚本

$("#searchbox").keyup(function() {
   dataTable.fnFilter(this.value);
});    

工作演示 -> http://jsfiddle.net/TbrtF/

如果您使用的是 DataTables 1.10，则 JS 应如下所示:

$("#searchbox").on("keyup search input paste cut", function() {
   dataTable.search(this.value).draw();
});