pagination when listing parent child content - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

SteveMid 25 posts 127 karma points

Mar 03, 2022 @ 16:03

0

Pagination when listing parent / child content

Hi. I have been working through the official documentation tutorials and followed the below to create a Parent / Item setup:

https://our.umbraco.com/documentation/Tutorials/Creating-Basic-Site/Articles-Parent-and-Article-Items/

On that page, they say

We'll assume our fictional company, Widgets Ltd, writes about ten articles a month and want the articles page to act like a blog

That wouldn't take long before there are way too many articles for one page, but the tutorial does not go into how to add pagination, and any articles I can find online tend to be either for earlier versions (that I can't get working), or way beyond my current abilities.

Could somebody point me in the right direction? Thanks.

Copy Link
Corné Hoskam 81 posts 588 karma points MVP 3x c-trib

Mar 08, 2022 @ 13:08
101
Hi Steve,

The most straight forward method for pagination would be to make use of the LINQ Skip & Take options, where Take is the amount of items you want on your page, and the Skip is the ((Pagenumber * Take) - Take).

An example of pages with 10 items on them, where we want to fetch items for Page 3:
```
var selection = Umbraco.Content(Guid.Parse("e0a4f1ff-122e-41bd-941c-f9686f03019f"))
                .ChildrenOfType("articlesItem") 
                .Where(x => x.IsVisible())
                .OrderByDescending(x => x.CreateDate)
                .Skip(20)
                .Take(10); 
```
Which in this case would return you the 10 items you would display on Page 3 (Items 21-30).

Hope this helps!

Kind regards,

Corné Hoskam
Copy Link
SteveMid 25 posts 127 karma points

Mar 09, 2022 @ 11:49
0
Thanks for the reply Corné. I will look into this further.

When building the pagination buttons, would querystrings be best?

So... thinking this through, if we were on page 3 of 6 we'd have something like the below:
```
<PREV> 1 2 |3| 4 5 6 <NEXT>
```
with the following hyperlinks
```
PREV: thispage?show=(show-1)
1: thispage?show=1
2: thispage?show=2
3: thispage?show=3
4: thispage?show=4
5: thispage?show=5
6: thispage?show=6
NEXT: thispage?show=(show+1)
```
Obviously with a little logic to build this navigation automatically and disable buttons where not needed etc.

Or is there a better way?
Copy Link
Corné Hoskam 81 posts 588 karma points MVP 3x c-trib

Mar 10, 2022 @ 11:58

0

Hi Steve,

Personally I would implement it the same way as you have described, using query strings, with the addition to leave ?Show=1 blank when entering the page for the first time, where 1 would be the default page, and then have it be something like ?page=2 or ?p=2..n for any following pages!

Kind regards,

Corné

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Pagination when listing parent / child content