Skip navigation
Currently Being Moderated

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

Jun 13, 2012 8:22 AM

Tags: #for #cq5 #pagination #components

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.

 

Thanks

 
Replies
  • Currently Being Moderated
    Jun 13, 2012 11:24 AM   in reply to Amitdstar

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 9:07 PM   in reply to adamyocum

    These components being authored by a user only.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 21, 2012 5:44 AM   in reply to himanshu jain

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

     

    --mapslibrary

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

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

    ----springbreak

    ----summer

    ----summerbreak

    ----fall

    ----etc... etc..

     

    Components involved (all custom)

     

    TabsContainerComponent

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

                                  <%

                                  tabCount++;

                               }

                                            }

                                  }

                        }

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

     

     

    if(request.getAttribute("hourspath")!=null){

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

    }

    %>

    <%

    try { 

       Page HoursPage = null;

       if(incomingPath!=null)

           HoursPage = pageManager.getPage(incomingPath);

       else

           HoursPage = currentPage;

      

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

       

       HoursTab tab = new HoursTab();

       tab.loadData(HoursPage);

       %>   

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

               <div class="tabbody">    

               <%

               if(tab.hasRegularHours()){

                   %>

                        <div class="regularhours">  

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

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

     

    <SNIP>

     

    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. 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points