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

  • Corné Hoskam 80 posts 587 karma points MVP 3x c-trib
    Mar 08, 2022 @ 13:08
    Corné Hoskam
    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

  • SteveMid 25 posts 127 karma points
    Mar 09, 2022 @ 11:49
    SteveMid
    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?

  • Corné Hoskam 80 posts 587 karma points MVP 3x c-trib
    Mar 10, 2022 @ 11:58
    Corné Hoskam
    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é

Please Sign in or register to post replies

Write your reply to:

Draft