Skip to content

Instantly share code, notes, and snippets.

@hubertlepicki
Created March 26, 2010 17:54
Show Gist options
  • Save hubertlepicki/345176 to your computer and use it in GitHub Desktop.
Save hubertlepicki/345176 to your computer and use it in GitHub Desktop.
/* Client side pagination with jQuery by Hubert Łępicki / AmberBit
License: MIT
Usage:
- HTML:
<div class='paginated' per-page='4'><div class='i'>Item 1</div><div class='i'>Item 2</div>....<div class='i'>Item 100</div></div>
- JS:
$('.paginated').clientSidePagination();
*/
$.fn["clientSidePagination"] = function(options) {
options = options || {};
var self = this;
$(this).data("page", 1);
$(this).data("per_page", $(this).attr("per-page") || 5);
$(this).data("num", $(".i", $(self)).size());
$(this).append("<div class='pagination'><a href='#' class='previous'>&lt;&lt;</a> <span class='current'></span> <a href='#' class='next'>&gt;&gt;</a></div>");
showPage(1);
$(".next", $(this)).bind("click", nextPage);
$(".previous", $(this)).bind("click", previousPage);
function nextPage(event) {
event.preventDefault();
current = $(self).data("page");
if (Math.ceil($(self).data("num") / $(self).data("per_page")) > current)
showPage(current + 1);
}
function previousPage(event) {
event.preventDefault();
current = $(self).data("page");
if (current > 1)
showPage(current - 1);
}
function showPage(page) {
$(self).data("page", page);
$(".i", $(self)).hide();
for(i=0; i<$(self).data("per_page"); i++) {
index = $(self).data("per_page") * ($(self).data("page")-1) + i;
if (index < $(self).data("num"))
$($(".i", $(self))[index]).show();
$(".pagination .current", $(self)).html(page+" / "+Math.ceil($(self).data("num") / $(self).data("per_page")));
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment