JSF ui：重复分页

我想知道如何做一个ui：重复多个页面，我点击上一个/下一个按钮来查看下一组数据。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">

更新1（代码拉斯穆斯弗兰卡）

PLS发现代码被你的要求。

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

来源

2012-06-25 user1433804

你的命令链接里面的UI重复工作好吗？我在这方面遇到问题，我不知道是否是jsf限制。 –

它完美地工作 – user1433804

请求范围？您每次创建managedBean时都加载您的列表？谢谢 –

你想分页工作的服务器端或客户端？

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

如果客户端：所有页面的所有数据都应该包含在ui中：重复使其可用于客户端的javascript修改。换句话说，就像现在一样。添加“可见性：隐藏的”;到除第一页服务器端以外的所有行，其中x是显示的行数，其中style="#{loop.index > x ? 'visibility: hidden;' : ''}"。然后制作一个在页面更改时调用的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-25 11:13:07

我试过上面的选项（客户端）风格部分工作正常，但我无法获得脚本的工作，请检查下面的代码为按钮，$（'＃panelGrid3 tr'）。show（）;和.each（函数（i，e））工作。 – user1433804

$（'＃panelGrid3 tr'）选择id为panelGrid3的容器内的所有行（tr元素）。show（）从它们中移除“visibility：hidden;”这个函数传递给each（）循环遍历所有行，i是循环的索引，e是元素（tr）。一个可能的错误位置是选择器＃panelGrid3，如果该元素在JSF容器中，JSF增加了它的ID。请张贴更多的HTML代码，如果您想获得更多帮助，请发布JS错误！ –

Rasmus Franke，请在问题部分找到代码 – user1433804

我想通了，用户界面：重复已经偏移和尺寸，这有助于在做分页，我们需要实现在托管bean的逻辑（仅保留图像的NUM的轨迹，显示的图像和不断增加/减少上一个和下一个按钮[将控制分页]的数字）。

来源

2012-07-09 12:11:57 user1433804

JSF ui：重复分页

回答

相关问题