删除默认搜索框并在 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 数据表中添加自定义搜索框的主要内容,如果未能解决你的问题,请参考以下文章