jQuery Pagination Plugin with Filtering - smFilteredPagination

About

Description

smFilteredPagination is a jQuery pagination plugin that has been designed to be more flexible than existing plugins by using counts instead of wrappers to define pages. This allows for items to be filtered dynamically without changing the number of results per page.

Explanation

Consider the following design patterns. One that uses wrappers around items to define pages, where results are then filtered. It can get quite hairy very quickly as the counts per page will be incosistent and confusing to the end-user. What makes smFilteredPagination a better alternative is in the way it handles pages, using calculations based on classes. The same example without pages is shown on the right. This is how smFilteredPagination works.

<!-- This example would be showing page 2, displaying 1 item. -->
<div class="page hide">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
<div class="page">
	<div class="item filtered"></div>
	<div class="item"></div>
	<div class="item filtered"></div>
</div>
<div class="page hide">
	<div class="item filtered"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
<!-- not very flexible -->

<!-- Showing page 2, displaying 3 items, 2 came from "page 3". -->
<div class="results">
	<div class="item hide"></div>
	<div class="item hide"></div>
	<div class="item hide"></div>
	<div class="item filtered hide"></div>
	<div class="item"></div>
	<div class="item filtered hide"></div>
	<div class="item filtered hide"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
<!-- much more flexible (how smFilteredPagination works) -->

The hidden class is used to hide any items outside the currently viewed "slice". In addition to the hidden class, you may add a list of classes that can be used as filters to dynamically filter items from the pagination.

smFilteredPagination aims to be a simple, highly configurable and flexible javascription pagination solution.

Please read the source code and check out the demos for more information.

Required Files

jQuery 1.4+
jquery.smFilteredPagination.js
jquery.smFilteredPagination.css

Add them to your document like such:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.smFilteredPagination.js"></script>
<link rel="stylesheet" href="css/jquery.smFilteredPagination.css" type="text/css" media="all" />

Download

All source is available for download at github.com/saltermitchell.

This documentation is a work in progress, please read the page source if you're having trouble.

Top

Usage Examples

Example 1: Default

$(function(){ // document ready
    pagination1 = new $.smFilteredPagination($("#pagination-1"));
});

<div id="pagination-1" class="example-pagination">
    <div class="results">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        ...
        <div class="item">Item 30</div>
        <div class="item">Item 31</div>
        <div class="item">Item 32</div>
    <div>
<div>

This is the minimal example of pagination which uses the default options specified at the bottom of this document.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 29

Item 30

Item 31

Item 32

Example 2: # Per Page and Live Modification to Items

$(function(){ // document ready
    pagination2 = new $.smFilteredPagination($("#pagination-2"), {
        pagerHeader: "pagerHeader2",
        pagerFooter: "pagerFooter2",
        itemsPerPage: 20
    });
    // using public methods
    $("#p2-per-page").change(function() {
        pagination2.setItemsPerPage($(this).val());
    });
	// toggle filtering of even rows
	$("#p2-filter-even").click(function() {
		if ($(this).hasClass("off")) {
			$(this).removeClass("off").addClass("on");
			$("#pagination-2 div.item:odd").addClass("filtered");
			$("span",this).text("on");
		} else {
			$(this).removeClass("on").addClass("off");
			$("#pagination-2 div.item.filtered").removeClass("filtered");
			$("span",this).text("off");
		}
		pagination2.rebuild();
		return false; // prevent default
	});
    $("#p2-add").click(function() {
		// this can be dynamic, consider "items.php?start="+$("last-id").val()+"&count=10"
        pagination2.addItems("examples/ajax-items.html");
        return false; // prevent default
    });
});

<div id="pagination-2" class="example-pagination">
    <div class="results">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        ...
        <div class="item">Item 30</div>
        <div class="item">Item 31</div>
        <div class="item">Item 32</div>
    <div>
<div>

This example shows how to use public methods with useful scenarios, such as updating the page count and adding/removing filters. Try increasing the count to 6 or 10 and them "filter even rows". Remove the filter and change to 40 to see pagination hide itself if the pageCount = 1.