更改数据表中搜索框的DOM元素位置 [英] Changing DOM Element Position of searchbox in datatables

问题描述

实际上，我是jQuery datatables插件的新手.

Actually I am new to jQuery datatables plugin.

我已使用此代码使用此方法将插件附加到了我的表上.

I have attached the plugin to my tables using this method using this code.

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

现在我要的是数据表提供一个文本框，我们可以在其中输入过滤器字符串，结果将被过滤.

Now What I want is datatables provides a text box in which we can enter our filter string and results will be getting filtered.

因此，我想将现有的设计文本框用于此目的，而又不想在UI中添加新的文本框.所以我通过这个链接

So I want to use my existing designed textbox for that purpose I don't want to add a new textbox in the UI. So I gone through this link

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

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

But I am not understanding. Is it possible to use the existing textbox. Please advice

在实现此数据表之前，我遇到了类似情况

See I was having situation like this before implementing this datatables

现在，当我应用此datatables插件时，将添加一个新文本框以进行搜索，我不想添加到新文本框，而是希望现有的文本框实现搜索功能.

Now when I apply this datatables plugin A new text box gets added for search I don't want to a new text box I want my existing textbox to implement search functionality.

推荐答案

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

This is very simple. First you must hide the default search box :

.dataTables_filter {
   display: none;
}

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

Example of your own designed search box, placed somewhere in the HTML :

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

在搜索框中键入内容时进行搜索/过滤的脚本

script to search / filter when typing in the search box

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

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

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

If you are using DataTables 1.10 the JS should look like:

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

这篇关于更改数据表中搜索框的DOM元素位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！