title: Pagination In Table sightly
body: <p>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.</p>
  <pre><code>&lt;tfoot&gt;
     &lt;tr class=&quot;footable-paging&quot;&gt;
       &lt;td colspan=&quot;5&quot;&gt;
         &lt;div class=&quot;footable-pagination-wrapper&quot;&gt;
           &lt;ul class=&quot;pagination&quot; id=&quot;demo&quot;&gt;
             &lt;li class=&quot;footable-page-nav disabled&quot; data-page=&quot;first&quot; aria-label=&quot;first page&quot;&gt;
               &lt;a class=&quot;footable-page-link&quot; href=&quot;${request.requestURL.toString}&quot;&gt;«&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class=&quot;footable-page-nav disabled&quot; data-page=&quot;prev&quot; aria-label=&quot;previous&quot; id=&quot;prev-page&quot;&gt;
               &lt;a class=&quot;footable-page-link&quot; href=&quot;${request.requestURL.toString}&quot;&gt;‹&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class=&quot;footable-page visible active&quot; data-page=&quot;1&quot; aria-label=&quot;page 1&quot;&gt;
               &lt;a class=&quot;footable-page-link&quot; href=&quot;${request.requestURL.toString}&quot;&gt;1&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class=&quot;footable-page visible&quot; data-page=&quot;2&quot; aria-label=&quot;page 2&quot;&gt;
               &lt;a class=&quot;footable-page-link&quot; href=&quot;${request.requestURL.toString}&quot;&gt;2&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class=&quot;footable-page-nav&quot; data-page=&quot;next&quot; aria-label=&quot;next&quot; id=&quot;next-page&quot;&gt;
               &lt;a class=&quot;footable-page-link&quot; href=&quot;${request.requestURL.toString}&quot;&gt;›&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class=&quot;footable-page-nav&quot; data-page=&quot;last&quot; aria-label=&quot;last page&quot;&gt;
               &lt;a class=&quot;footable-page-link&quot; href=&quot;${request.requestURL.toString}&quot;&gt;»&lt;/a&gt;
             &lt;/li&gt;
           &lt;/ul&gt;
           &lt;div class=&quot;divider&quot;&gt;&lt;/div&gt;
           &lt;span class=&quot;label label-default&quot;&gt;&lt;/span&gt;
         &lt;/div&gt;
       &lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tfoot&gt;
   &lt;tbody id=&quot;body&quot;&gt;
     &lt;tr class=&quot;ninja_table_row_0 nt_row_id_157&quot; id=&quot;tr&quot; data-sly-repeat.child=&quot;${currentPage.listChildren}&quot;&gt;
       &lt;td class=&quot;ninja_column_0 ninja_clmn_nm_logoname footable-first-visible&quot; style=&quot;display: table-cell;&quot;&gt;
         &lt;a href=&quot;${child.getProperties['path']}.html&quot;&gt;
           &lt;img src=&quot;${child.getProperties['logo']}&quot; alt=&quot;${child.getProperties['company']}&quot;&gt;
         &lt;/a&gt;
       &lt;/td&gt;
       &lt;td class=&quot;ninja_column_1 ninja_clmn_nm_company&quot; style=&quot;display: table-cell;&quot;&gt;
         &lt;a href=&quot;${child.getProperties['path']}.html&quot;&gt;${child.getProperties['company']} &lt;/a&gt;
       &lt;/td&gt;
       &lt;td class=&quot;ninja_column_2 ninja_clmn_nm_boothno&quot; style=&quot;display: table-cell;&quot;&gt;${child.getProperties['boothNo']}&lt;/td&gt;
       &lt;td class=&quot;ninja_column_3 ninja_clmn_nm_country&quot; style=&quot;display: table-cell;&quot;&gt;${child.getProperties['country']}&lt;/td&gt;
       &lt;td class=&quot;ninja_column_4 ninja_clmn_nm_profile footable-last-visible&quot; style=&quot;display: table-cell;&quot;&gt;${child.getProperties['profile']}&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tbody&gt;
  </code></pre>