Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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
Level 8
1 Reply

Avatar

Correct answer by
Level 8