Bootstrap Pagy Demo

[Back to project site on GitHub]

---

All examples assume the the following HTML code in the document:

<div class="pagination">
	<ul></ul>
</div>

---

Usage with default options.

$(".pagination").pagy({
	totalPages: 20,
	currentPage: 1
});

---

Get informed on a page change.

Current Page: 3

$(".pagination").pagy({
	totalPages: 20,
	currentPage: 1,
	page: function(page) {
		$("#current-page").text(page);
	}
});

---

Truncate first/next and prev/last for first resp. last page.

$(".pagination").pagy({
	totalPages: 20,
	currentPage: 1,
	truncate: true
});

---

Use custom inner window.

$(".pagination").pagy({
	totalPages: 20,
	currentPage: 1,
	innerWindow: 4
});

---

With outer window instead of first/last.

$(".pagination").pagy({
	totalPages: 20,
	currentPage: 1,
	outerWindow: 1,
  first: null,
  last: null
});

---

Set current page programmatically.

Set

$(".pagination").pagy({
	totalPages: 20,
	currentPage: 1
});

$("form").on("submit", function() {
	var currentPage = parseInt($(this).find("input").val());
	$(".pagination").pagy("page", currentPage);
	return false;
});

---

Set current page and total pages programmatically.

Set

$(".pagination").pagy({
	totalPages: 20,
	currentPage: 1
});

$("form").on("submit", function() {
	var currentPage = parseInt($(this).find("input:eq(0)").val());
	var totalPages = parseInt($(this).find("input:eq(1)").val());
	$(".pagination").pagy("page", currentPage, totalPages);
	return false;
});