Datastar & Craft CMS Demos

Pagination

The Output

The Signals


			

The Code

{# pagination.twig #}

{{ include ('_partials/pagination.twig') }}
{# _partials/pagination.twig #}

{% set limit = limit ?? 10 %}
{% set offset = offset ?? 0 %}

{% set query = craft.entries.limit(limit).offset(offset) %}
{% set totalEntriesCount = query.count() %}
{% set entries = query.all() %}

{% set totalPages = (totalEntriesCount / limit)|round(0, 'ceil') %}
{% set page = (offset / limit) + 1 %}

<div id="pagination">
	{% if entries|length %}
		{% for entry in entries %}
			<h3>{{ entry.title }}</h3>
		{% endfor %}
	{% endif %}

	<div>
		<div>
			{% if totalPages > 1 and page > 1 %}
				<a data-on:click="{{ datastar.get('_partials/pagination', {offset: offset - limit}) }}">
					&laquo; Previous
				</a>
			{% else %}
				&laquo; Previous
			{% endif %}
		</div>
		<div>
			<p>Page {{ page }} of {{ totalPages }}</p>
			<p>{{ totalEntriesCount }} Results found</p>
		</div>
		<div>
			{% if totalPages > 1 and page < totalPages %}
				<a data-on:click="{{ datastar.get('_partials/pagination', {offset: offset + limit}) }}">
					Next &raquo;
				</a>
			{% else %}
				Next &raquo;
			{% endif %}
		</div>
	</div>
</div>
Made using Datastar and the Datastar Plugin for Craft CMS.