Wagtail CMS: Adding Pagination

Pagination is the ability to click through "pages". You most commonly see this on a Blog Listing Page, where you have "page 1 of 4" for example. In this lesson we're going to use Django Paginator right out of the box to add pagination to our Wagtail Blog Listing Page. No 3rd party packages, no craziness, and minimal maintenance. Just beautiful Wagtail and Django working together in 11 lines of code in our Wagtail Page Pagination.
Tutorial: learnwagtail.com/tutorials/ho...
The Git Commit: github.com/CodingForEverybody...
Learn Wagtail from scratch with the official Wagtail for Beginners Course
learnwagtail.com/wagtail-for-...
Used in this video: Wagtail 2.4, Python 3.7, Django 2.1.5 #Wagtail #Django #Python

[@brianschott7841]

If you want to preserve the page order instead, you can do .order_by("path") instead.

[@SisiraSomaratne]

This is so nice! Yes, it's better to use Django native way than the 3rd party package, unless there is a real advantage. Thank you!😀

[@ardywibisana]

Great! Keep up the good work, I'd definitely want to see more tutorial from you.

[@CodingForEverybody]

Fantastic! I'm glad to hear you're liking these videos! I have a bunch more planned! :D

[@richardallen543]

Was thinking about this on a product list page, or a search result page, the number of pagination boxes could get out of hand pretty quickly. Also, I'm a bit OCD, I don't like pagination bars that change in size as I navigate 😂 So, maybe it's useful to someone, below is a paginator limiter. You set a 'wing size' (because I couldn't think of a better name) - so wing size of 2 will show 2 pages on either side of the selected page. Combined with the template, you'll get a couple of extra boxes, one each side for the ellipse ('...') to show there are more pages. The ellipse will be replaced by the endpoint if that's the only page that is hidden. If you are less than the wing size away from the endpoint, extra boxes are added to the 'other side' so that the number of displayed boxes stays the same. eg wing size 2 --> displayed nav boxes=7 In a pagination with 9 pages and wing size=2: 1: *1* 2 3 4 5 6 ... 4: 1 2 3 *4* 5 6 ... 5: ... 3 4 *5* 6 7 ... 6: ... 3 4 5 *6* 7 8 9 8: ... 3 4 5 6 7 *8* 9 etc In the get_context() after getting your paginated posts: context['page_range'] = paginator_range( requested_page=posts.number, last_page_num=paginator.num_pages, wing_size=2 ) # Next two are needed as Django templates don't support accessing range properties context['page_range_first'] = context['page_range'][0] context['page_range_last'] = context['page_range'][-1] The paginator_range function: def paginator_range(requested_page, last_page_num, wing_size=5): """ Given a 'wing size', return a range for pagination. Wing size is the number of pages that flank either side of the selected page Presuming missing pages will be denoted by an elipse '...', the minimum width is 2xelipse + 2x wing size + selcted page if the elipse is one off the outer limit, replace it with the outer limit The range returned will always return a fixed number of boxes to the properly configured pagination nav""" # If last page number is within minimum size, just return entire range if last_page_num

[@Zack_MD]

Just perfect... Subscribed

[@AyazAmlani]

love this paginator. super convenient!

[@CodingForEverybody]

Right?! Comes with Django, too, which is REALLY great. Wagtail had a paginator but it's been deprecated in favor of Djangos.

[@jksawery]

Hi! Great course! I'm trying to paginate category filtered posts, any idea how to implement it?

[@jkojkojkojk]

Use def get_context(self, request): in your page class, then filter your queryset and pass it back into the context

[@boryskuczkowski]

One could add conditional to display only certain amount of pages to the front and to the back, otherwise you could end up with ridiculous numbers at the bottom.

[@hazhohuman]

hi, thanks, at 3:27 about the number of posts in a page, can we let editor user decide that from dashboard ? (like a field in database)..! or (like a snippet in the global site-setting)..!

[@CodingForEverybody]

Yep. You can add a field to your BlogListingPage and use that. `pagination_amount = models.PositiveSmallIntegerField(default=5)` and in the Paginator() class you can pass in `self.pagination_amount` instead of "5".

[@oussamaladhari550]

I was pushed to add : .object_list : paginator.get_page(page).object_list to get the right queryset of my data

[@niteshchaudhary1711]

How to add searching in this page?

[@jkojkojkojk]

Why am i getting EmptyPage at /gallery/ That page contains no results Request Method: GET Request URL: 127.0.0.1:8000/gallery/?page=2 But when I manually type 127.0.0.1:8000/gallery?page=2 I get the 2nd page!?!