JSF ui：分页重复答案

【问题标题】：JSF ui:repeat with paginationJSF ui：分页重复
【发布时间】：2012-06-25 10:58:29
【问题描述】：

我想知道如何做一个 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>

【问题讨论】：

您在 ui 中的命令链接是否重复工作正常？我在这方面遇到问题，我不知道是否是 jsf 限制。
是请求范围吗？您在每次创建 managedBean 时加载您的列表？谢谢
哦，我的问题与 requestScoped 有关，我需要再次从数据库中获取数据。使用 sessionScoped，它就像你的一样。

标签： jsf-2 primefaces

【解决方案1】：

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

如果服务器端：您需要在托管 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();
        }
    });
}

【讨论】：

我尝试了上面的选项（客户端）样式部分工作正常，但我无法让脚本工作请检查下面的按钮代码，$('#panelGrid3 tr').show();并且 .each(function(i,e) 有效。
$('#panelGrid3 tr') 选择 ID 为 panelGrid3 的容器内的所有行（tr 元素）。 show() 删除“可见性：隐藏；”从他们那里（目的是重置表格）。传递给 each() 的函数遍历所有行。 i 是循环的索引，e 是元素 (tr)。一个可能的错误位置是选择器#panelGrid3，如果该元素位于 JSF 容器内，JSF 会将其添加到其 ID。如果您需要进一步的帮助，请发布更多 HTML 代码和 JS 错误！
Rasmus Franke，请在问题部分找到更新的代码
您的 panelGrid 位于多个容器中，这些容器将添加到您的 id 中（即使在重复内容时也使其独一无二），因此您的 clientId 将类似于 mainForm:tabView:possibleLayoutId:panelGrid3。对于 jQuery，冒号需要转义，所以这不是很好。我建议在 panelGrid3 周围制作一个 DIV 并提供它和 ID，然后您可以在 jquery 中使用它来选择所有表行。诸如 DIV 之类的非 JSF 元素不会被容器 ID 前置。
我还建议使用您选择的浏览器的 html 检查器/javascript 调试器！

【解决方案2】：

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

【讨论】：