Question

我想知道如何做一个ui：重复多个页面，我点击上一个/下一个按钮查看下一组数据。

目前我有一个ui：重复

<ui:repeat id="repeat5" value="#{getData.data}" var="lst2" varStatus="loop">

我可以在行/列中查看内容（基本上是图像），但所有数据都显示在同一个屏幕上，但我想只显示5行和4列，然后使用上一个/下一个按钮查看剩余的5行/ 4列布局中的图像。

目前我只能指定如下所示的列配置，如何获取指定的行。

<h:panelGrid  id="panelGrid3" columns="4" cellspacing="2" cellpadding="2">

更新1（Rasmus Franke代码）

请按照您的要求查找代码。

<h:form id="mainForm">
<p:tabView id="tabView" >
    <p:tab title="Image Viewer" id="Viewer" titleStyle="height:30px">
        <p:layout>
        <p:layoutUnit id="layoutEast" position="east" size="350" style="height:200px">
                        <p:commandButton type="button" onclick=""  
                                         icon="ui-icon-circle-triangle-w"/>  
                        <p:commandButton type="button" onclick="switchPage(1,29);"  
                                         icon="ui-icon-circle-triangle-e"/>
                        <h:panelGrid  id="panelGrid3" columns="5" cellspacing="2" cellpadding="2">
                            <ui:repeat id="repeat5" value="#{getData.data}" var="imagesLst2" varStatus="loop">
                                    <h:panelGroup>
                                        <p:commandLink id="cl3" action="#{getData.imageID(imagesLst2.imageID)}" update=":mainForm:tabView:example">
                                            <p:graphicImage id="gi3" value="#{imagesStreamer.image}" styleClass="bord" 
                                                            onmousedown="mouseDown(this)" alt="image not available3"  width="60" height="60"
                                                            style="#{loop.index > 29 ? 'visibility: hidden;' : ''}">
                                                <f:param name="id5" value="#{imagesLst2.imageID}" />
                                            </p:graphicImage>
                                        </p:commandLink>
                                    </h:panelGroup>
                            </ui:repeat>
                        </h:panelGrid>
                    </p:layoutUnit>
        </p:layout>
    </p:tab>
</p:tabView>

Answer 1

您希望分页在服务器端还是客户端工作？

如果是服务器端：您需要在托管bean中创建一个属性，并将其设置为您的分页值：例如，对于页面5，获取值为5的int。使用此数据修改getData.data，以便它只包含该页面的数据。这样，您只需获取为每个页面显示的相关数据，但您必须通过普通帖子或通过ajax为每个分页点击发出http请求。

如果客户端：所有页面的所有数据都应包含在ui：repeat中，以使其可用于客户端的javascript修改。换句话说，就像现在一样。添加“可见性：隐藏;”除了第一页服务器端以外的所有行style="#{loop.index > x ? 'visibility: hidden;' : ''}"，其中x是显示的行数。然后创建一个在页面更改时调用的javascript函数，其中包含页码和每页元素数的参数。

function switchPage(page, numPerPage){
    var first = (page-1) * numPerPage;
    var last = (page) * numPerPage;
    $('#panelGrid3 tr').show();
    $('#panelGrid3 tr').each(function(i, e){
        if(i >= first || i <= last){
           $(e).show();
        }else{
           $(e).hide();
        }
    });
}

Answer 2

我发现ui：repeat有偏移量和大小有助于进行分页我们需要在托管bean中实现逻辑（只需跟踪图像数量，显示图像并继续增加/减少数字上一个和下一个按钮[将控制分页]。

JSF ui：重复分页

2 个答案: