Pagination through js | Community
Skip to main content
August 10, 2022
Solved

Pagination through js

  • August 10, 2022
  • 1 reply
  • 955 views
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>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Manu_Mathew_
Community Advisor
Manu_Mathew_Community AdvisorAccepted solution
Community Advisor
August 10, 2022