1

我想知道如何做一个 ui:repeat 多页，我点击上一个/下一个按钮来查看下一组数据。

目前我有一个 ui:repeat

<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>

4

2 回答 2

0

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

如果服务器端：您需要在托管 bean 中创建一个属性，并将其设置为您的分页值：例如 int，它的值为 5，用于第 5 页。使用此数据修改 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();
        }
    });
}
于 2012-06-25T11:13:07.477 回答
0

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

于 2012-07-09T12:11:57.640 回答