p：滚动内容的数据表

Question

我有一个带有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属性，但标题已滚动到最右侧。我只想滚动数据表的内容，而不是页眉和页脚（分页）。任何人都可以帮助我吗？

Answer 1

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

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

• 从scrollable组件中删除scrollWidth和<p:datatable>属性;
• 在styleClass的{​​{1}}属性中包含另一个CSS类（任何名称，但保留此名称以便稍后使用，在本例中我将使用名称'overflow-content'）; < / LI>
• 在您的页面中包含以下CSS规则：

-

<p:datatable>

结果将是这样的：

Answer 2

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

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

你已经完成了。