Question

其实我是jQuery datatables插件的新手。

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

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

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

所以我想使用我现有的设计文本框来实现这个目的我不想在UI中添加新的文本框。所以我通过了这个链接

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

但我不理解。是否可以使用现有的文本框。请建议

在实现此数据表

之前，请参阅我遇到的情况

enter image description here

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

Answer 1

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

.dataTables_filter {
   display: none;
}

您自己设计的搜索框的示例，位于HTML中的某处：

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

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

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

工作演示 - ＆gt; http://jsfiddle.net/TbrtF/

如果您使用DataTables 1.10，JS应该如下所示：

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

Answer 2

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

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

或使用sDom这样的属性：

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

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

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

$(document).ready(function() 

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

Answer 3

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

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

然后将搜索过滤器放在这个新位置：

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

Answer 4

您可以使用css

轻松更改搜索输入的样式

在css文件中：

.dataTables_filter input {
     background: blue;
}

使用Javascript

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

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

Answer 5

是的，你可以在你的CSS中创建一个类：

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

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

示例：

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

确保您的脚本位于html的主要部分。

Answer 6

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

隐藏默认搜索框（CSS）：
```
.dataTables_filter { display: none; }
```

将新过滤器添加到所需的位置（HTML）

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

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

$(document).ready(function() {
   var table = $('#example').DataTable();

$('#searchFilter').on( 'keyup', function () {
   table.search( this.value ).draw();
} );

注意：不建议使用fnfilter，因此请使用search（），但search（）不会重绘表，因此您也需要使用draw（）。

Answer 7

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

如下所示的dom属性将用您选择的<div>包装默认的搜索栏，该搜索栏可用于向左拉（其中 f 是过滤条件/搜索栏， t 是表格：

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

输出：

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

更多信息：DataTables dom option

Answer 8

JavaScript代码是 "dom": '<"top"f>rt<"bottom"><"clear">',

和CSS div.dataTables_wrapper div.dataTables_filter{ text-align: left; }

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

8 个答案: