Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Pagination through js

Avatar

Level 3
I have made a table to display a list of child pages in sightly. I want to work on pagination in the list. This is my slightly code snippet. I have tried different approches but still no success. I am new to javascript so I am facing issues in finding the best approach. Can please help me with the correct way to achieve this?
Thanks in advance
<tfoot>
   <tr class="footable-paging">
     <td colspan="5">
       <div class="footable-pagination-wrapper">
         <ul class="pagination" id="demo">
           <li class="footable-page-nav disabled" data-page="first" aria-label="first page">
             <a class="footable-page-link" href="${request.requestURL.toString}">«</a>
           </li>
           <li class="footable-page-nav disabled" data-page="prev" aria-label="previous" id="prev-page">
             <a class="footable-page-link" href="${request.requestURL.toString}"></a>
           </li>
           <li class="footable-page visible active" data-page="1" aria-label="page 1">
             <a class="footable-page-link" href="${request.requestURL.toString}">1</a>
           </li>
           <li class="footable-page visible" data-page="2" aria-label="page 2">
             <a class="footable-page-link" href="${request.requestURL.toString}">2</a>
           </li>
           <li class="footable-page-nav" data-page="next" aria-label="next" id="next-page">
             <a class="footable-page-link" href="${request.requestURL.toString}"></a>
           </li>
           <li class="footable-page-nav" data-page="last" aria-label="last page">
             <a class="footable-page-link" href="${request.requestURL.toString}">»</a>
           </li>
         </ul>
         <div class="divider"></div>
         <span class="label label-default"></span>
       </div>
     </td>
   </tr>
 </tfoot>
 <tbody id="body">
   <tr class="ninja_table_row_0 nt_row_id_157" id="tr" data-sly-repeat.child="${currentPage.listChildren}">
     <td class="ninja_column_0 ninja_clmn_nm_logoname footable-first-visible" style="display: table-cell;">
       <a href="${child.getProperties['path']}.html">
         <img src="${child.getProperties['logo']}" alt="${child.getProperties['company']}">
       </a>
     </td>
     <td class="ninja_column_1 ninja_clmn_nm_company" style="display: table-cell;">
       <a href="${child.getProperties['path']}.html">${child.getProperties['company']} </a>
     </td>
     <td class="ninja_column_2 ninja_clmn_nm_boothno" style="display: table-cell;">${child.getProperties['boothNo']}</td>
     <td class="ninja_column_3 ninja_clmn_nm_country" style="display: table-cell;">${child.getProperties['country']}</td>
     <td class="ninja_column_4 ninja_clmn_nm_profile footable-last-visible" style="display: table-cell;">${child.getProperties['profile']}</td>
   </tr>
 </tbody>
1 Accepted Solution

Avatar

Correct answer by
Community Advisor
1 Reply

Avatar

Correct answer by
Community Advisor