3 Replies Latest reply on Jun 21, 2012 5:44 AM by adamyocum

    how to impliment pagination to show only certain number of components in each count


      Hi CQ5 expert,


      I need yours help.


      i am creating a component having image ant text and that component i need to add in my page number of times.


      so i want to impliment pagination such that after a specified number of component it should show rest component in another pagination .


      like 5 compnents should be shown in 1 and next 5 should be shown when 2 is clicked ...



      Please help me achieving this.


      any sugestion is welcome.



        • 1. Re: how to impliment pagination to show only certain number of components in each count

          Are these components being authored by a user or generated from other data programmatically?

          • 2. Re: how to impliment pagination to show only certain number of components in each count

            These components being authored by a user only.

            • 3. Re: how to impliment pagination to show only certain number of components in each count
              adamyocum Level 1

              I might not have the whole solution for you  but can point you in a direction from a similar page I have been working on lately, now, this might not be the best way to do this, I am new at CQ5 also, but here goes...


              I have a similar situation where I have a page with a custom tabs component that needs to show only 4 tabs at a time maximum.  The 'tabs' data are authored in pages in a child area to the main 'tabs' page.  The node tree looks something like this.....



              ---hours  <--- parent page containing a tabs container component

              ----spring  <---- sub pages all use the 'hours' template which consists of several custom components





              ----etc... etc..


              Components involved (all custom)



                   - loops over the children for pages with 'hours' templates that and displays the first 4 in special tabdisplay components

                   - I have abstracted out a lot of the data handling and such so that the code in the jsp is actually very small.

              Example code snippet from the container....


              //Contains methods for parsing the components used to author the somewhat complex hours tabs

              HoursAPI hoursHelper = new HoursAPI();


              //Gives me all the 'tabs' authored below this node

              LinkedHashSet<HoursTab> hoursTabs = hoursHelper.getHoursTabs(currentPage.getPath(), pageManager, currentNode.getSession())


                <div class="tabs">



                        int tabCount = 1;

                        //Loop over each hours page

                        for(HoursTab tab : hoursTabs){

                                  if(tab.getEndDate()!=null && tab.getEndDate().isAfterNow()){ // only show current tabs

                                                      if(tab.isVisible()){ //only show 'visible' tabs, this is controlled through the component dialog

                                                                if(tabCount<=4){ // Only show first 4 current/visible tabs

                                            request.setAttribute("hourspath", tab.getHoursPage().getPath() );


                                            <cq:include script="../displayHoursTab_psul/displayHoursTab_psul.jsp" />







              <SNIPPED HERE>


              So you can see that I include above the subcomponents and I control how many are to be rendered into the page...

              <cq:include script="../displayHoursTab_psul/displayHoursTab_psul.jsp" />


              I also am doing request attribute passing there, where I pass the path to the page that has the data the tab is to include to each tabdisplay component....

              request.setAttribute("hourspath", tab.getHoursPage().getPath() );



              2nd component

              DisplayTabComponent - renders a chunk of html representing a tab


              String incomingPath = null;




                  incomingPath = request.getAttribute("hourspath").toString();




              try { 

                 Page HoursPage = null;


                     HoursPage = pageManager.getPage(incomingPath);


                     HoursPage = currentPage;


                 String pageTitle = HoursPage.getTitle() == null ? HoursPage.getName() : HoursPage.getTitle();


                 HoursTab tab = new HoursTab();



                         <h2><%=tab.getSemester()%> <br /><%=tab.getDate()%></h2> 

                         <div class="tabbody">    




                                  <div class="regularhours">  

                                     <h4><%=tab.getSemesterColumnLabel() %></h4>                                

                                     Monday: <%=tab.getHours("monday").toString() %><br/>




              The tab component above uses more custom classes like HoursTab that I made that can parse a page and load the hours info into data objects like HoursRegular and HoursException...



              I think you could include some parameters that are passed such as [numberToDisplay][pageNumber] and you could do simple pagination with your authored content using a similar strategy, it is very flexible if you want to use other apis and things the skys the limit, you may also want to look into what the built in code CQ uses for pagination is and use that for the pagination part.