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

Posted

技术标签:

【中文标题】删除默认搜索框并在 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: '>>') ;

【讨论】:

以上是关于删除默认搜索框并在 jquery 数据表中添加自定义搜索框的主要内容,如果未能解决你的问题,请参考以下文章

如何在 SQL 语句中引用组合框并在 VBA 中运行该语句

如何删除 jQuery DataTables 插件添加的搜索栏和页脚?

搜索框自定填充,自动填充数据

从文本框中删除自动搜索并在搜索按钮上搜索

打开元组数据框并执行操作[关闭]

在jQuery中,在鼠标悬停时添加类并在鼠标悬停时将其删除的最佳方法是啥?