How to Implement Simple Pagination

This article is going to assume a proficient knowledge of each loops and variables. Specifically we will be heavily using the "limit" filter for each loops and the "get_var" functionality. For this guide, I will be looping through a pageset named "blog_article" and will be showing 5 articles per page.

Step 1

Write the each loop for the first page using variables for limit operators

To start we want to create the page with the each loop set up to generate the content for the page. We want to add a limit to the each loop. If you write "limit" followed by one number, that is the total number the each loop with show. If you write "limit" followed by 2 numbers, separated by a comma, the first number is how many items to skip, and the second number is how many to show. Our initial loop we will use a limit of 0, 5 so we skip none and show five. We'll set those numbers as variables and then call those variables in the each loop

{{ $show = 5 }}
{{ $skip = 0 }}
{{ each blog_article as post sort by date DESC limit {$skip}, {$show} }}
<li>
	<h4>{{post.title}}</h4>
</li>
{{ end-each }}

Step 2

Update the number to skip to be dynamically set by a Get Variable

The only thing that changes between pages in our each loop will be how many entries to skip. So we are going to set up the skip variable to check if there is a Get Variable, a variable in the URL, and if so update the skip variable to that number. If there isn't a Get Variable we know we are on the first page, so we can set the skip variable to zero in that case.

{{ $show = 5 }}
{{ if {get_var.p} }}
{{ $skip = {get_var.p} }}
{{ else }}
{{ $skip = 0 }}
{{ end-if }}
{{ each blog_article as post sort by date DESC limit {$skip}, {$show} }}
<li>
	<h4 >{{post.title}}</h4>
</li>
{{ end-each }}

Step 3

Add previous and next buttons that set our Get Variable

Now that our skip variable is ready to be set by a get variable, all we need is a link that updates the url. Our get variable for our next page will always be equal to the number we skipped on our current page, plus the number we've shown, and our get variable for our previous page will always be the number we skipped minus the number we showed. We can use the parsley "math" call to do some basic math in our hrefs.

<a class="button" href="{{ page.getUrl() }}?p={{math({$skip} - {$show})}}">Previous {{$show}} Articles</a>
<a class="button" href="{{ page.getUrl() }}?p={{math({$skip} + {$show})}}">Next {{$show}} Articles</a>

Step 4

Hide previous link on the first page

Our previous button does no good when we are on the first page, so we need to add an if check to know when to show it. We know the number to skip is always equal to zero on the first page, so we can check if our skip variable is not equal to zero, then show the previous link.

{{if {$skip} != 0 }}
<a class="button" href="{{thispage.getUrl()}}?p={{eval({$skip} - {$show})}}">Previous {{$show}} Articles</a>
{{end-if}}

Step 5

Hide next link on the last page

Knowing when you're on the last page is trickier than knowing when you're on the first page. With the first page skip is always zero, but with the last page the number to skips is dynamic and will change as entries are added or removed. We need a way to check if the last item in our each loop is the last item available or if it was stopped because of the limit. Then we know if the last item in our each loop wasn't the last item available then we still need a next button. There are a couple ways to go about this, but my solution is to add a new each loop below our original and exactly like it except with the reverse sort order and a limit of 1. Then set a unique variable in both each loops equal to the item's ZID. Now we can check if these ZIDs aren't the same, we know to show the next button, because there are still more entries that can be shown. Pay attention to line 6 and lines 9 through 13 in the code below.

{{ each blog_article as post sort by date DESC limit {$skip}, {$show} }}
	<li>
		<h4>{{post.title}}</h4>
	</li>
	{{ $lastOne = {post.zuid} }}
{{ end-each }}

{{ each blog_article as post sort by date ASC limit 1 }}
	{{ $lastTwo = {post.zuid} }}
{{ end-each }}

{{ if {$lastOne} != {$lastTwo} }}
	<a class="button" href="{{ page.getUrl() }}?p={{math({$skip} + {$show})}}">Next {{$show}} Articles</a>
{{ end-if }}

Here is the complete code

{{ $show = 5 }}

{{ if {get_var.p} }}
	{{ $skip = {get_var.p} }}
{{ else }}
	{{ $skip = 0 }}
{{ end-if }}

{{ each blog_article as post sort by date DESC limit {$skip}, {$show} }}
	<li>
		<h4>{{post.title}}</h4>
	</li>
	{{ $lastOne = {post.zid} }}
{{ end-each }}

{{ if {$skip} != 0 }}
	<a class="button" href="{{thispage.getUrl()}}?p={{eval({$skip} - {$show})}}">Previous {{$show}} Articles</a>
{{ end-if }}

{{ each blog_article as post sort by date ASC limit 1 }}
	{{ $lastTwo = {post.zid} }}
{{ end-each }}

{{ if {$lastOne} != {$lastTwo} }}
	<a class="button" href="{{ page.getUrl() }}?p={{math({$skip} + {$show})}}">Next {{$show}} Articles</a>
{{ end-if }}