Article

James Mathias's avatar

DRY Pagination

by: James Mathias on: 12/10/2016 | Read in 2 minutes

If you want quick, easy to maintain, and consistent pagination across your site or application, DRY (Don’t Repeat Yourself) is a great way to accomplish this. in ExpressionEngine you can create DRY pagination in a few simple steps.

First you’ll need a Template Partial. I like to name this par-paginate-links.

{paginate}
	{pagination_links page_padding='1'}
		<div class="pagination">
			<ul>
				{first_page}
					<li class="pg-first"><a href="{pagination_url}"><span>first</span></a></li>
				{/first_page}
				{previous_page}
					<li class="pg-prev"><a href="{pagination_url}"><span>prev</span></a></li>
				{/previous_page}
				{page}
					<li><a href="{pagination_url}"{if current_page} class="act"{/if}>{pagination_page_number}</a></li>
				{/page}
				{next_page}
					<li class="pg-next"><a href="{pagination_url}"><span>next</span></a></li>
				{/next_page}
				{last_page}
					<li class="pg-last"><a href="{pagination_url}"><span>last</span></a></li>
				{/last_page}
			</ul>
		</div>
	{/pagination_links}
{/paginate}

This partial covers paginated links, you can adjust the output to your personal needs, but this is your basic “first, previous, 1, 2, 3, next, last” pattern.

Now that you have this, all you need to do is call it into the exp:channel:entries tags you want to paginate.

Something like this,

{exp:channel:entries channel='blog' limit='10'}
	HTML Output...
	{if no_results}
		{redirect='404'}
	{/if}
	{par-paginate-links}
{/exp:channel:entries}

And there you have, a clean, fast and simple way to make your websites more maintainable with ExpressionEngine.

James Mathias's avatar

James Mathias

Father of four, husband of one, Internet improver, gamer, fitness amateur, artist, writer + outlaw.

Have ideas on how to improve this article? .(JavaScript must be enabled to view this email address) or share your feedback with @ellislab on Twitter.

ExpressionEngine News

#eecms, #events, #releases