删除默认搜索框并在 jquery 数据表中添加自定义搜索框

Posted 2023-02-22

【中文标题】删除默认搜索框并在 jquery 数据表中添加自定义搜索框

【英文标题】：remove default search box and add custom one in jquery datatable

【发布时间】：2015-06-28 11:34:05

【问题描述】：

我正在使用 jquery 数据表。我需要的是删除默认搜索框并在不同的地方添加自定义搜索框。我使用bFilter:false 删除搜索输入，但它也禁用了搜索过滤器功能。任何想法如何在不使用 css 的情况下修复它fiddle

$(document).ready(function()    
   var table= $('#example').DataTable(
        paging:false,
        bFilter:false,
        ordering:false
    );

    $('#search-inp').keyup(function()
      table.search($(this).val()).draw() ;
)

);

【问题讨论】：

只需删除 <input type="text" id="search-inp"> 并保留 id 以将其设置为您的自定义输入，您也可以将其放置在您需要的任何位置（我设法将搜索文本放在底部，所以从技术上讲，您可以为所欲为）。

【参考方案1】：

用于隐藏数据表 AS 的默认搜索输入框： 默认情况下 sDom="lftipr";

对数据表执行这些操作 'l' - 长度变化 'f' - 过滤输入 't' - 桌子！ '我' - 信息 'p' - 分页 'r' - 处理 要删除默认搜索框，只需从 sDom 中删除 f 字符。

喜欢：

$('#table').DataTable(
  "sDom":"ltipr"
);

希望这一定能奏效

【讨论】：

完美。谢谢！

这使用legacy API，如果您无法升级到当前版本的DataTables，这是一个合适的答案。

【参考方案2】：

您可以使用dom 选项隐藏搜索输入而不禁用搜索功能。如果您想提供自己的搜索输入（可能逐列或全局），这很有用。它还完成了您最初的要求 - 在不使用 CSS 的情况下删除原始搜索输入。

这是文档：https://datatables.net/examples/basic_init/dom.html

当然还有一个例子：

var table = $('#example').DataTable( 分页：假， b过滤器：假， 订购：假， 搜索：真实， dom: 't' // 这里只显示表格 );

您还可以使用此方法将搜索输入呈现在不同的位置。根据您需要在哪里呈现输入，您也许可以完全避免使用自定义输入。

【参考方案3】：

bFilter 实际上删除了搜索功能，所以我建议它只是隐藏默认搜索，然后您可以使用您已经编写的代码实现自定义搜索。只需检查以下代码：

#example_filter //#example is your table id, so you can replace it with whatever Id you give to table

    display:none;

注意：在初始化过程中删除bFilter

然后你的正常编码。这是DEMO

【参考方案4】：

正如 Guruprasad 提到的，'bfilter': false 删除了搜索功能。所以你需要使用'dom'选项。

dom 还带有标记和样式功能。因此，如果您需要确切的数据表样式，那么您应该使用

$('#example').dataTable( dom: '>>') ;