Pagination through js

[janhavi_singh]

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>

[Manu_Mathew_ · Accepted solution]

@janhavi_singh This thread seems similar: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-add-pagination-to-...

Also this is a sample js code for ref: http://jsfiddle.net/Lzp0dw83/1/

https://datatables.net/