过滤 dataTables.net，不包含过滤框输入

Posted 2023-05-07

【中文标题】过滤 dataTables.net，不包含过滤框输入

【英文标题】：Filter dataTables.net without included filter-box input

【发布时间】：2012-04-14 19:40:09

【问题描述】：

我想用DataTables的过滤功能，但不想用他们的搜索框。

In their docs 在 bFilter 下它说：

请注意，如果您希望在 DataTables 中使用过滤，这必须保持“真” - 要删除默认过滤输入框并保留过滤功能，请使用

之后句子不完整。

我试过了：

var oTable = $('#sortable').dataTable(
    'bPaginate':false,
    'bInfo':false,
    'bFilter': true // displays Search box, setting false removes filter ability all together
);
$('#Accumulate').click(function()
    oTable.fnFilter("Accumulate");
);

【参考方案1】：

你也可以隐藏正在使用的css类

<style type="text/css">
.dataTables_filter 
     display: none;

</style> 

【讨论】：

啊哈，简单快捷。谢谢。

sDom 也简单快捷。 ;-) 并且它不会更改可能使用搜索框的其他表格的 CSS。这里绝对不是“酸葡萄”，但老实说，我觉得使用提供的工具排除搜索框是一个“更好”的解决方案，而不是包含它然后隐藏它。

我并不是说我的解决方案更好...它只是另一种解决方案，至于对其他表的影响，可以通过提供更“细粒度的 css 选择器”轻松消除比如#tableID dataTables_filter...

哦，绝对同意！多种选择总是最好的。只是回复 Pratyush 的评论，而不是判断这个答案（这是完全有效的）。

【参考方案2】：

普拉图什，

不同 UI 元素的纯外观显示和隐藏是通过 sDom 参数完成的：

http://datatables.net/usage/options#sDom

请注意，根据您是否使用 jQuery UI，所需的语法会有所不同。

【讨论】：

我刚刚查看了 sDom 文档，我会说它远非“简单”。事实上，这对我来说毫无意义。通过 CSS 隐藏非常简单快捷，尽管可能不是最佳方法。

同意；这并不简单。我花了很多次尝试才使它适合我的应用程序。然而，我认为花在“得到它”上的时间是有回报的。然后，您将能够修改组件而不是修改 CSS。

【参考方案3】：

使用（可能会加快数据表的初始化，以避免一些计算）：

$("#table").dataTable("bFilter": false);

或任何没有 f 选项的 sDom（请参阅官方文档http://datatables.net/usage/options#sDom 以获取可用选项列表）：

$("#table").dataTable("sDom": '...t...');

在官方支持网站上寻找相同的选项：http://datatables.net/forums/discussion/289/disable-search-filter-text-box

【参考方案4】：

"sDom": 'ltipr'

是最简单的方法。

我使用过的完整示例：

 oTable = $('#overview').dataTable(

        
           "aoColumns":[
                               null,
                               null,
                               null,
                               null,
                               null,
                                 "sSortDataType":"date-euro",
                                 "sSortDataType":"date-euro",,
                               null
              ],
              "aaSorting":[],
              "iDisplayLength": -1,
              "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
              "sDom": 'ltipr'

        
        );

【讨论】：

嗨 Andrew，我会试试这个，但我很好奇 'ltipr' 代表什么，如果你可以添加一些颜色来隐藏过滤器框？提前致谢！

嗨 Poul，这里如下：'l' - 长度变化 'f' - 过滤输入 't' - 表格！ 'i' - 信息 'p' - 分页 'r' - 处理如果你离开我们的 f 例如它不会显示过滤器