如何将数据表列过滤器的位置更改为外部标头?

时间:2014-10-06 10:33:21

标签: primefaces filter datatable

以此展示示例为起点:http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml

我想放置每个列过滤器的输入而不是这里:

我想在这里:

标题下方和包含数据的行。

这可能吗?我看到filterPosition的属性p:column,但它只接受顶部和底部,两者都在标题内。

1 个答案:

答案 0 :(得分:1)

我设法做到但是以一种非常黑客的方式,所以我会接受这个,直到有人找到别的东西。

table_with_filter作为styleClass的{​​{1}},我添加了以下css:

首先,我使用边框在数据和标题之间创建了空格:

p:dataTable

然后,我使用自定义负底部向下移动输入,并将标题的溢出设置为可见,以便我可以在其外部看到过滤器。

.table_with_filter.ui-datatable-data {
    border-top: 25px solid #DDDDDD; 
}

可能会对款式进行一些小调整,以便完美贴合所有内容,就是这样。

结果:

enter image description here