Jsf 2 JSF 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">

更新Rasmus Franke的1代码

请按照您的要求查找代码

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

---

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

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

If client-side：所有页面的所有数据都应该包含在ui:repeat中，以便在客户端修改javascript。换句话说，就像现在这样。添加可见性：隐藏；除了样式为{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();
        }
    });
}

---

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

我尝试了上面的选项客户端样式部分工作正常，但我无法使脚本正常工作。请检查下面的按钮代码，$'panelGrid3 tr'。如何显示；和.eachfunctioni，e起作用。$'panelGrid3 tr'选择id为panelGrid3的容器内的所有行tr元素。显示移除可见性：隐藏；从他们的目的是重置表。传递给每个行的函数在所有行上循环。i是循环的索引，e是元素tr。一个可能出现错误的地方是选择器panelGrid3，如果该元素在JSF容器中，JSF将添加到其ID中。请发布更多HTML代码，如果需要进一步帮助，请发布JS错误！Rasmus Franke，请查找问题部分更新的代码您的panelGrid位于多个容器中，这些容器将添加到您的id中，以使其在重复内容时具有唯一性，因此您的clientId将类似于mainForm:tabView:possibleLayoutId:panelGrid3。jQuery需要对冒号进行转义，所以这不是很好。我建议在panelGrid3周围创建一个DIV，并给出它和ID，然后在jquery中使用它来选择所有表行。非JSF元素（如DIV）不会被容器ID预先添加。我还建议您使用所选浏览器的html inspector/javascript调试器！ui内的命令链接重复工作正常吗？我在这方面面临问题，我不知道这是否是jsf的限制。它是请求范围吗？每次创建managedBean时都会加载列表吗？谢谢，我的问题与RequestScope有关，我需要再次从数据库中获取数据。经过治疗，它和你的一样有效。