p：带有滚动内容的数据表答案

【问题标题】：p:datatable with scroll on contentp：带有滚动内容的数据表
【发布时间】：2018-01-31 18:44:40
【问题描述】：

我有一个带有 primefaces 的数据表：

<p:dataTable var="wapsoplandtl" id="wapsoplandtlList" widgetVar="wapsoplandtlList" value="#{exportController.wapsoplandtls}"
                 paginator="true" rows="50" scrollable="true" scrollWidth="2500px;" styleClass="borderless"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
                 currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" paginatorPosition="bottom"
                 rowsPerPageTemplate="10,25,50" rowKey="#{wapsoplandtl.dtlsys}">

并产生类似这样的东西：

如您所见，它具有 scrollwidth 属性，但标题滚动到最右侧。我只想滚动数据表的内容，而不是页眉和页脚（分页）。谁能帮帮我？

【问题讨论】：

将 width: 100%; 添加到其 CSS...
还是一样，没有任何反应
@Kukeltje 我不是指列标题，而是数据表标题。标题中有“Pesanan”一词。

标签： css primefaces datatable

【解决方案1】：

为此，您需要先添加选项 scrollX: true 并应将 css 添加到表 width:100% 内联。

$('#example').dataTable( {
  "scrollX": true
} );

你就完成了。

【讨论】：

找不到css属性scrollX
@RandykaYudhistira 它不是 css 属性，您需要在调用数据表功能的选项中添加它datatables.net/reference/option/scrollX
@PrimeFaces Datatable != 'datatables.net'

【解决方案2】：

这只能通过 CSS 来完成，忘记 <p:datatable> 组件的可滚动属性，显然它总是会溢出整个表格，而不仅仅是内容。

在这种情况下，请执行以下操作：

从<p:datatable> 组件中删除scrollable 和scrollWidth 属性；
在来自<p:datatable> 的styleClass 属性中包含另一个 CSS 类（任何名称，但保留此名称以供以后使用，在这种情况下我将使用名称“溢出内容”）；
在您的页面中包含以下 CSS 规则：

.overflow-content .ui-datatable-tablewrapper table { 
    overflow: auto;
    width: 2500px;
}

结果将是这样的：

【讨论】：

不起作用，滚动仍在页面底部并滚动整个数据表