Expand my Community achievements bar.

SOLVED

Implementing Pagination for a Component using sightly in aem 6.4

Avatar

Level 3

Hi,

I want to add the pagination feature in aem 6.4 in my sightly code. I want to perform iteration for the page numbers.

<div class="pagination-section">

<div class="row">

<div class="col-md-12 paging">

<nav aria-label="Page navigation example">

<ul class="justify-content-center pagination">

<li class="page-item first disable-custom"><a href="#" aria-label="First">

<span class="arrow-span-first">&#60;</span>

<span class="sr-only">First</span></a>

</li>

<ul class="pagination-count pagination">

<li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span> </a></li>

<li class="page-item"><a class="page-link" href="#">2</a></li>

</ul>

</li>

</ul>

</nav>

</div>

</div>

</div>

Can I iterate through the pages dynamically in my code? I want the page numbers "1" and "2" to be dynamic here.

Regards,

Berni

smacdonald2008Jörg Hoh

1 Accepted Solution

Avatar

Correct answer by
Level 10

You can use HTL to iterate through a dataset. See this Community HELPX article to learn how to iterate through a DATASET. In this example - the dataset is set via a Multifield:

Adobe Experience Manager Help | Creating a HTL Repeating Data Set 6.4 Component that uses Sling Mode...

Now for your example - if I were to implement this - I would use SLING MODELS on that backend to ensure that my DATASET contained the PAGE INformation i wanted to display in the component. YOu can use AEM APIS to populate the dataset with the correct information.

View solution in original post

1 Reply

Avatar

Correct answer by
Level 10

You can use HTL to iterate through a dataset. See this Community HELPX article to learn how to iterate through a DATASET. In this example - the dataset is set via a Multifield:

Adobe Experience Manager Help | Creating a HTL Repeating Data Set 6.4 Component that uses Sling Mode...

Now for your example - if I were to implement this - I would use SLING MODELS on that backend to ensure that my DATASET contained the PAGE INformation i wanted to display in the component. YOu can use AEM APIS to populate the dataset with the correct information.