AEM 6.5 : add pagination to list | Community
Skip to main content
manal-ghanim
Level 2
Aug 2, 2021 4:47 PM UTC
Solved

AEM 6.5 : add pagination to list

Hi,

We are implementing a complex list that shows elements with a title, a description, an image and a link. I would like to know what is he best way to implement pagination using only frontend logic ?

Thanks,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
Aug 2, 2021 9:33 PM UTC

Hi,

We have implemneted the list component with pagination, which get the child pages title, description and image and create a list item with a link.

we created a json service and servlet, which return relavent results based on paginagion, you can pass page number in the json request when click on paginations and get the pagination results at front end side and create a result DOM based on json response, you can use the Query Builder API which support the pagination properties if running queries to fetch pages title, description etc..

Arun Patidar
View reply

5 replies

partyush
partyush
New Participant
Jan 17, 2023 11:26 AM UTC

Hi Manal-ghanim, 

 

I am facing an issue to implement a proper site pagination, or element pagination, can you please guide me to achieve this via custom code, thanks in advance

Translate
Umesh_Thakur
Umesh_Thakur
New Participant
Aug 3, 2021 5:35 AM UTC

@manal-ghanim , you can use pagination from the front-end purely. We had  implemented it with the help of one open source JS library named Data tables.

It is pretty much easy to use.

More details you can get it on below urls:

https://datatables.net/

 

Hope this will help.

Umesh Thakur

Translate
    manal-ghanimAuthor
    Level 2
    Aug 3, 2021 12:59 PM UTC
    @umesh_thakur, does datable have an option to display complex data instead of tabular info ? Basically, I wish to render AEM list items and apply paging.
    Translate
    arunpatidar
    arunpatidarAccepted solution
    New Participant
    Aug 2, 2021 9:33 PM UTC

    Hi,

    We have implemneted the list component with pagination, which get the child pages title, description and image and create a list item with a link.

    we created a json service and servlet, which return relavent results based on paginagion, you can pass page number in the json request when click on paginations and get the pagination results at front end side and create a result DOM based on json response, you can use the Query Builder API which support the pagination properties if running queries to fetch pages title, description etc..

    Translate
    Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...