jquery.clientsidepagination.js

/* 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")));
        }
    }
};