表中的分页视觉答案

【问题标题】：Pagination In Table sightly表中的分页视觉
【发布时间】：2022-08-19 21:21:23
【问题描述】：

我制作了一个表格，可以直观地显示子页面列表。我想处理列表中的分页。这是我的小代码sn-p。我尝试了不同的方法，但仍然没有成功。我是 javascript 新手，所以我在寻找最佳方法时遇到了问题。请帮助我以正确的方法来实现这一目标。

<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>

标签： javascript html aem sightly

【解决方案1】：

HTL/Sightly 已经有一段时间的迭代控制，请参阅data-sly-repeat spec：

<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<div data-sly-repeat.article="${articlesCollection @ begin = 0, end = 9}" id="${article.id}">${article.excerpt}</div>

您可以将它与 URL 参数结合使用来设置列表页面的开始和结束。

【讨论】：