Pagination (Prev / Next)

This example shows how to step through a list of items using a page number and simple @click handlers. The list is rendered with *for, and only the items on the current page are shown.

Code

<serc-rod data='{
	"page": 1,
	"page_size": 5,
	"items": [
		"Getting started guide",
		"Directives overview",
		"Data and events",
		"Nested Sercrod",
		"Integration notes",
		"Playground examples",
		"SSG / SSR setup",
		"Runtime details",
		"Configuration reference",
		"Advanced patterns",
		"Debugging tips",
		"Changelog"
	]
}'>
	<section>
		<h2>Controls</h2>
		<p>
			<button type="button"
				@click="if(page > 1){ page--; }"
				*attr="{ disabled: page <= 1 }"
			>
				Prev
			</button>

			<button type="button"
				@click="if(page < Math.ceil(items.length / page_size)){ page++; }"
				*attr="{ disabled: page >= Math.ceil(items.length / page_size) }"
			>
				Next
			</button>
		</p>
		<p>
			Page %page% of %Math.ceil(items.length / page_size)%.
		</p>
	</section>

	<section>
		<h2>Items</h2>
		<ul>
			<li *for="item of items.slice((page - 1) * page_size, (page - 1) * page_size + page_size)">
				%item%
			</li>
		</ul>
	</section>
</serc-rod>

Sample