如何將數據表列過濾器的位置更改爲外部標題？

Question

以這次展覽例子作爲出發點：http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml

我想將每列濾波器的輸入，而不是在這裏：

我想在這裏有它：

下面的標題和上面的行包含數據。

這可能嗎？我看到p:column的屬性filterPosition，但它只接受頂部和底部，並且兩者仍在頭部內。

Answer 1

我設法做到了，但以一種非常冒險的方式，所以我會接受，直到有人發現別的東西。

有table_with_filter爲p:dataTable的styleClass，我添加了下面的CSS：

首先，我創建的數據，並帶有邊框頭之間的空間：

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

然後，我移動向下輸入一個自定義的底部底部，並將頭部的溢出設置爲可見，以便我可以在其外部看到過濾器。

.table_with_filter.ui-column-filter.ui-inputfield { 
    position: relative; 
    bottom: -26px; 
} 
.table_with_filter th.ui-state-default { 
    overflow: visible; 
} 

也許對樣式進行一些微小的調整來完美地適應一切，就是這樣。

結果：