Changing URL when paginating (NodeJS)

[mgaussie]

Hi all,

We make a query to the DB based on a query parameter in the url e.g. ?category=name_here.

What we want to do is change the page URL each time we paginate to the next or previous result (as we how one result per page).

E.g. on page load (and server connect) we load the first result, I then want the page url to convert from example.com/items?category=name_here to example.com/item/item1?category=name_here.

Then when I click next I want example.com/item/item2?category=name_here and so on.

This is so that if a user just loads example.com/item/item2 it will load that single item. But, if they are viewing via a category, they can paginate through them, and the url changes each time.

Any ideas on the smartest approach to achieve this?

I’m successfully paginating, but without URL path changing.

Thanks!

[Apple]

If you want a Wappler approach, you could use internal links

Otherwise, you have this Javascript method:

History: pushState() method - Web APIs | MDN

I actually remember I made a feature request for that one, and it’s implemented already:

Browser component, need dmx-on:pushstate attribute

Hello, I need to use dmx-on:pushstate attribute on the browser component dynamic events - it seems only popstate is implemented: [Screenshot]

[mgaussie]

thank you Apple, the feature that was implemented looks suitable, without knowing exactly how to implement it just yet - so thank you for sharing this - it’s promising and i’ll dig deeper.

[AdrianoLuiz]

You can use State manager pagination for this

Now it will keep the navigation state with the original saved parameters

[mgaussie]

Thanks @AdrianoLuiz for this - but wouldn’t this simply add the offset to the url, rather than the UUID of the item itself? that’s what I need to change on each page url

[Sorry_Duh]

Never really tried this but just a idea the query manager variables you define can be set using dynamic events (for example a button click etc) and will be in the url, depending how your pagination is setup maybe you could use this event instead of the state manager to customise the url instead of just the offset value?