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

Posted 2023-05-07

【中文标题】更改数据表中搜索框的 DOM 元素位置

【英文标题】：Changing DOM Element Position of searchbox in datatables

【发布时间】：2013-10-16 22:19:11

【问题描述】：

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

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

$(document).ready(function() 

         $('#table_id').dataTable(

         );
 );

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

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

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

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

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

现在，当我应用此数据表插件时，为搜索添加了一个新文本框

【问题讨论】：

所以你想让现有的文本框不做过滤？

@Danny 我想要现有的文本框来过滤功能但我不想要新的文本框......意味着我想要在实现数据表之前在文本框中拥有搜索功能。跨度>

【参考方案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();
);  

【讨论】：

您可以通过在数据表构造函数中设置 bFilter: false 来完全删除它，而不是隐藏默认搜索框。编辑：这也禁用了自定义搜索框，所以它毕竟不起作用......

@SimonBengtsson，是的，bFilter : false 完全禁止过滤功能。

为了更接近过滤框在 DataTables 中的工作方式，您可以在输入中添加更多事件绑定：$("#searchbox").bind('keyup search input paste cut', function () ...);

@RyanKohn，是的，但最重要的是，您不是 dataTables 方式的“奴隶”。例如，实现仅在用户按 Enter 时触发的搜索非常方便。

您可以省略 dom 选项中的 f 字母，而不是使用 css 隐藏默认过滤器，从而完全删除输入。可以在docs 中找到一个示例。

【参考方案2】：

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

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

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

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

【讨论】：

这个答案真的被低估了。在我的情况下，这最适合拥有 20 多个动态生成的数据表。其他选项导致即使使用 unbind() 也会触发过多的事件，并导致奇怪的缓慢，因为最高投票的答案会导致每次击键超过 10 个事件。

同一页面上多个表格的最佳解决方案！

这是最快的方法！

【参考方案3】：

要删除过滤器选项，您可以使用其他答案中提到的 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() );
     );
 );

【讨论】：

"bFilter": false 完全禁用搜索/过滤功能，而不仅仅是隐藏默认搜索框 - 所以对于目标是过滤的问题，这是一个奇怪的答案能力，只是在另一个文本框中。此外，sDom 在这种情况下是无用/无关的 - 显然不能说得太频繁：sDom 用于设置 dataTables 生成元素的顺序和位置，仅此而已！

是的，您对 bFilter 的看法是正确的，我注意到在我的回答中它禁用了该功能。现在关于 sDom，通过从表达式中删除 f，过滤器消失 (datatables.net/release-datatables/examples/basic_init/dom.html)。

只有当你实际使用sDom时才会出现这种情况，这不是必需的。并且不存在有问题的sDom。事实上，OP 写了 "...using this code" -> 和一个空的初始化部分。

【参考方案4】：

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

在css文件中：

.dataTables_filter input 
     background: blue;

使用 javascript

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

将其粘贴到您的控制台尝试一下。

【参考方案5】：

对于 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()。

【讨论】：

嗨，我只想知道，本地存储的datatables文件夹中的文件位置在哪里需要为.dataTables_filter display: none; 更改？

对不起，请忽略上面的评论，只是找到放置.dataTables_filter display: none; 欢呼的地方。

【参考方案6】：

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

像下面这样的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

【参考方案7】：

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

.pull-left
    float: left !important;

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

示例：

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

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

【参考方案8】：

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

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