Primefaces 数据表分页器不受页面布局更改的影响答案

【问题标题】：Primefaces datatable paginator is not affected by page's layout changesPrimefaces 数据表分页器不受页面布局更改的影响
【发布时间】：2017-04-27 14:04:04
【问题描述】：

我正在使用带有分页器的 Primefaces 4.0 数据表。桌子就在一个可以展开或折叠的手风琴面板，影响页面的布局。不幸的是，当执行手风琴动画时，数据表的分页器不会移动。

BEFORE EXPANDING the accordion:

AFTER EXPANDING the accordion:

我从 primefaces 展示中获取了一些代码，并没有太多接触它，但无论如何这就是我的 xhtml 中的内容：

知道我做错了什么吗？

表格代码：

            <p:dataTable id="idDataTable" value="#{analysisBean.listOfSamu}" var="nthSamu" rows="10"
                     paginator="true"
                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     selectionMode="single">
            <p:column headerText="ID" sortBy="#{nthSamu.idSamu}" filterBy="#{nthSamu.idSamu}" filterMatchMode="contains">
                <h:outputText value="#{nthSamu.idSamu}"/>
            </p:column>
            <p:column headerText="EJE" sortBy="#{nthSamu.nombre}" filterBy="#{nthSamu.nombre}" filterMatchMode="contains">
                <h:outputText value="#{nthSamu.nombre}"/>
            </p:column>
            <p:column headerText="EJE" sortBy="#{nthSamu.primerApellido}" filterBy="#{nthSamu.primerApellido}" filterMatchMode="contains">
                <h:outputText value="#{nthSamu.primerApellido}"/>
            </p:column>
            <p:column headerText="IM" sortBy="#{nthSamu.importe}" filterBy="#{nthSamu.importe}" filterMatchMode="contains">
                <h:outputText value="#{nthSamu.importe}"/>
            </p:column>
            <p:column headerText="FE" sortBy="#{nthSamu.fecha}" filterBy="#{nthSamu.fecha}" filterMatchMode="contains">
                <h:outputText value="#{nthSamu.fecha}"/>
            </p:column>
        </p:dataTable>

手风琴代码：

    enter code her <p:fieldset legend="Filtros" style="width: 40%" >
                <h:panelGrid columns="1">
                    <p:accordionPanel multiple="true" style="width: 100%">
                        <p:tab title="Acerca del Giro">
                            <h:panelGrid columns="5">
                                <h:column>
                                    <h:outputLabel style="vertical-align:middle" value="Oficina: " />
                                    <p:selectOneMenu id="oficinaSelect" style="vertical-align:middle">
                                        <f:selectItem itemLabel="Todos" itemValue="Todos" />
                                        <f:selectItem itemLabel="  Naguaes" itemValue="  Naguaes" />
                                        <f:selectItem itemLabel="  aguaes" itemValue="  aguaes" />
                                        <f:selectItem itemLabel="Naguaes" itemValue=" s Naguaes" />
                                        <f:selectItem itemLabel="aguaes" itemValue=" s aguaes" />
                                    </p:selectOneMenu>
                                </h:column>


                    <h:column>
                                <h:outputLabel style="vertical-align:middle" value="País: "/>
                                <p:selectOneMenu id="paisSelect" style="vertical-align:middle">
                                    <f:selectItem itemLabel="Todos" itemValue="Todos" />
                                    <f:selectItem itemLabel="Naguaes" itemValue="  Naguaes" />
                                    <f:selectItem itemLabel="aguaes" itemValue="  aguaes" />
                                    <f:selectItem itemLabel="Naguaes" itemValue=" s Naguaes" />
                                    <f:selectItem itemLabel="aguaes" itemValue=" s aguaes" />
                                </p:selectOneMenu>
                            </h:column>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="Acerca del Ejecutor">
                        <h:panelGrid columns="5">

                            <p:graphicImage url="images/usericon.png" width="30" height="30" style="border: 3px solid activecaption"/>
                            <h:column>
                                <h:outputLabel value="Naguaidad:" style="vertical-align:middle"/>
                                <p:selectOneMenu id="idNaguaidadSelect2" style="vertical-align:middle">
                                    <f:selectItem itemLabel="Todos" itemValue="Todos" />
                                    <f:selectItem itemLabel="aguaes" itemValue="  Naguaes" />
                                    <f:selectItem itemLabel="guaes" itemValue="  aguaes" />
                                    <f:selectItem itemLabel="Naguaes" itemValue=" s Naguaes" />
                                    <f:selectItem itemLabel="aguaes" itemValue=" s aguaes" />
                                </p:selectOneMenu>
                            </h:column>
                            <h:column>
                                <h:outputLabel value=" Porto NInj:" style="vertical-align:middle" />
                                <p:selectOneMenu id="id PortoNInjSelect" style="vertical-align:middle">
                                    <f:selectItem itemLabel="Todos" itemValue="Todos" />
                                    <f:selectItem itemLabel="aguaes" itemValue="  Naguaes" />
                                    <f:selectItem itemLabel="guaes" itemValue="  aguaes" />
                                    <f:selectItem itemLabel="Naguaes" itemValue=" s Naguaes" />
                                    <f:selectItem itemLabel="aguaes" itemValue=" s aguaes" />
                                </p:selectOneMenu>
                            </h:column>
                            <h:column>
                                <h:outputLabel value="Actividad:" style="vertical-align:middle"/>
                                <p:selectOneMenu id="idActividadSelect" style="vertical-align:middle">
                                    <f:selectItem itemLabel="Todos" itemValue="Todos" />
                                    <f:selectItem itemLabel="  Naguaes" itemValue="  Naguaes" />
                                    <f:selectItem itemLabel="  aguaes" itemValue="  aguaes" />
                                    <f:selectItem itemLabel=" s Naguaes" itemValue=" s Naguaes" />
                                    <f:selectItem itemLabel=" s aguaes" itemValue=" s aguaes" />
                                </p:selectOneMenu>
                            </h:column>
                        </h:panelGrid>
                    </p:tab>
                </p:accordionPanel>

                <p:commandButton id="idFiltrarCommandButton2" style="float:right" icon="ui-icon-search" value="Filtrar" action="#{analysisBean.populateList()}" update="idDataTable"></p:commandButton>
            </h:panelGrid>
        </p:fieldset>

【问题讨论】：

标签： jsf layout primefaces

【解决方案1】：

我很喜欢素颜。似乎您需要在两个单独的表单和面板中拥有 dataTable 和手风琴面板。我建议做类似的事情，

代码：

    <Dialogue>

      <Form1>
       <Panel>
          Datatable
       </panel>
      </Form1>

      <Form2>
        <panel>
         AccordionPanel
        </panel>
      </Form2>

     </Dialogue>

只是不要忘记相应地更新相应的表单

【讨论】：