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

Changing DOM Element Position of searchbox in datatables

提问by Nikhil Agrawal

Actually I am new to jQuery datatables plugin.

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

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.

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

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

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

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

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

在实施此数据表之前，我遇到了这样的情况

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.

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

回答by davidkonrad

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

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

.dataTables_filter {
   display: none;
}

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

您自己设计的搜索框示例，放置在 HTML 中的某个位置：

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

script to search / filter when typing in the search box

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

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

working demo -> http://jsfiddle.net/TbrtF/

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

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

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

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

回答by MaVRoSCy

To remove the filter options you can use css as mentioned in other answers or you can remove it in the initialisation of the datatable using:

要删除过滤器选项，您可以使用其他答案中提到的 css，或者您可以使用以下方法在数据表的初始化中将其删除：

$("#table").dataTable({"bFilter": false}); //disables filter input

or by using sDomattribute like this:

或者通过使用这样的sDom属性：

 "sDom": '<"H"lr>t<"F"ip>' //when bJuery is true

See here http://datatables.net/usage/options#sDomfor more options.

有关更多选项，请参见此处http://datatables.net/usage/options#sDom。

Now about using your own text field as a filter box then just attach a keypresshandler to it, and use the fnFilteroption like this:

现在关于使用您自己的文本字段作为过滤器框，然后将keypress处理程序附加到它，并使用如下fnFilter选项：

$(document).ready(function() 

     oTable = $('#table_id').dataTable({
         "sDom": '<"H"lr>t<"F"ip>' 
     });
     $('#myInputTextField').keypress(function(){
         oTable.fnFilter( $(this).val() );
     });
 });

回答by mtoloo

You can define a new element newSearchPlaceto have the data table search filter inside:

您可以定义一个新元素newSearchPlace以在其中包含数据表搜索过滤器：

<div id="newSearchPlace"></div>

Then put the search filter inside this new place:

然后将搜索过滤器放在这个新地方：

$("#newSearchPlace").html($(".dataTables_filter"));

回答by Cracker0dks

you can change the style of the search input very easy with css

您可以使用 css 轻松更改搜索输入的样式

in css File:

在 css 文件中：

.dataTables_filter input {
     background: blue;
}

With Javascript

使用 JavaScript

$(".dataTables_filter input").css({ "background" :"blue" });

Try it by paste this to your console.

通过将其粘贴到您的控制台来尝试。

回答by culter

For the actual version in Dec 2018 (v1.10.19) you need to do this steps:

对于 2018 年 12 月的实际版本（v1.10.19），您需要执行以下步骤：

1. Hide the default search box (CSS):

   .dataTables_filter { display: none; }
   

2. Add new filter to your desired place (HTML)

   Search:<br><input type="text" id="searchFilter">
   

3. After your DataTables inicialisation function you need to write your search function (JS):

   $(document).ready(function() {
      var table = $('#example').DataTable();
   
   $('#searchFilter').on( 'keyup', function () {
      table.search( this.value ).draw();
   } );
   

1. 隐藏默认搜索框 (CSS)：

   .dataTables_filter { display: none; }
   

2. 将新过滤器添加到您想要的位置 (HTML)

   Search:<br><input type="text" id="searchFilter">
   

3. 在您的 DataTables 初始化功能之后，您需要编写您的搜索功能（JS）：

   $(document).ready(function() {
      var table = $('#example').DataTable();
   
   $('#searchFilter').on( 'keyup', function () {
      table.search( this.value ).draw();
   } );
   

Note: fnfilter is deprecated, so use search(), but search() doesn't redraw the table, so you need to use draw() too.

注意：fnfilter 已被弃用，因此请使用 search()，但 search() 不会重绘表格，因此您也需要使用 draw()。

回答by GuillaumeCleme

As of DataTables 1.10, a domproperty can be added to the initialization. Although it is quite hard to master, it can be used to wrap all of the DataTables objects within <div>elements to style the built-in table control elements.

从 DataTables 1.10 开始，dom可以将属性添加到初始化中。虽然它很难掌握，但它可以用来将所有 DataTables 对象包装在<div>元素中以设置内置表格控件元素的样式。

A domproperty like the following would wrap the default search bar with a <div>of your choice, which can be used to pull left (where fis the filtering/search bar and tis the table:

一个dom类似下面的属性将包装的默认搜索栏与<div>您的选择，它可以用来拉左（其中˚F是过滤/搜索栏和牛逼是表：

$('#example').dataTable( {
  "dom": '<"pull-left" f><t>'
} );

Output:

输出：

<div class="pull-left">
  <div id="example_filter" class="dataTables_filter"><label><input type="search" aria-controls="example"></label></div>
</div>
<div>
  <table id="example" class="table dt-responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;" role="grid">
</div>  

More info: DataTables dom option

更多信息：DataTables dom 选项

回答by Mack Mack

Yes you can make a class in your css like:

是的，您可以在 css 中创建一个类，例如：

.pull-left{
    float: left !important;
}

and then add this class to datatable search div using jquery or javascript.

然后使用 jquery 或 javascript 将此类添加到数据表搜索 div。

example:

例子：

$('.dataTables_filter').addClass('pull-left');

make sure your script is in the head part of your html.

确保您的脚本位于 html 的头部。