Pagination Groups

One of the strongest features of the pagination plugin is simultaneous group management. Using the plugin, it is simple to create multiple sets of pagination controls in different elements, simply by calling the pagination() method on a jQuery object.

The Code

    <div class="pagination-container"></div>
    <div>
	    <h2>Pagination Content</h2>
        <div id="pagination-content"></div>
    </div>
    <div class="pagination-container"></div>
		

    jQuery('.pagination-container').pagination('my-group-name', {pages: 10}, function(group){
        jQuery('#pagination-content').html('Pagination Group: ' + group + '.
Now on page: ' + this)
    });
   		

Sharing a Content Area

As demonstrated above, calling to a single selector and setting up controllers allows for multiple linked groups to manage a single content area. Using the proper callback, you can allow multiple groups of pagination controls to manage a single content area. The below example will also update the above content area. Notice that it has a different group name, and number of pages.

The Code

    jQuery('.pagination-container-two').pagination('my-other-group-name', {pages: 20}, function(group){
        jQuery('#pagination-content').html('Pagination Group: ' + group + '.
Now on page: ' + this)
    });
   		

Reusing Controllers

Another key feature of the Pagination plugin is it's DRY (Don't Repeat Yourself) design pattern. Once pagination controllers have been set up, they can be reused to serve different content without re-creating any of the controls. Take the following example with 5 pages of content:

In addition to just switching the number of available pages, you can also set the current page.

Now, click one of the buttons below to update the number of pages of content to serve.

If the pagination controller is renumbered, and the current page is out of range of the new count, the current page will be autoset to the maximum. (Set the pages to 10, go to the end, then set the pages to 5)

The Code

    <div class="pagination-container"></div>
    <div>
	    <h2>Pagination Content</h2>
        <div id="pagination-content"></div>
    </div>
    <div class="pagination-container"></div>
		

    jQuery('.pagination-container').pagination('my-group-name', {pages: 10}, function(group){
        jQuery('#pagination-content').html('Pagination Group: ' + group + '.
Now on page: ' + this)
    });
    
    // Set up an onClick event to change the pagination to reflect the new content group
    jQuery('.update-content').click(function(){
        jQuery('.pagination-container').pagination('renumber', {pages: 15});
    })
   		

Controller Styles

The Pagination Plugin presents a number of configurable options for the display of the controls. These are a couple options you can set through the plugin and not through CSS.

Max Digits

You can set the max digits on a pagination controller to ensure consistent spacing. For example, if you set the max digits to 4, and you have 10 pages of content, only the current range of 4 digits will be shown (like so):

The Code

    jQuery('.pagination-container').pagination('my-group-name', {maxDigits: 4, pages: 10}, function(group){
        jQuery('#pagination-content').html('Pagination Group: ' + group + '.
Now on page: ' + this)
    });
   		

If you ever have less pages of content than your max digits, only that many pages of content will be displayed. (If the max is 8, and you only have 4 pages, only 4 digits will be shown)

Padding Digits

If you would prefer to simply have a number of digits on either side of your content area, in addition to or instead of the first/previous/next/last arrows, you can define this through the padding digits property (like so):

The Code

    jQuery('.pagination-container').pagination('my-group-name', {maxDigits: 8, numPaddingDigits: 2, pages: 20}, function(group){
        jQuery('#pagination-content').html('Pagination Group: ' + group + '.
Now on page: ' + this)
    });
   		

The number of padding digits is counted towards the Maximum Digits counter. If you specify a maximum number of digits of 8, and a number of padding digits to 2, you will have 4 digits in the middle, and two digits on either side. (So MaxDigits - PaddingDigits = NumberOfCenterDigits)

Custom Text

Additionally, you can update the spacer content, and text content for the pagination controls by passing in custom settings. For example, to change the first/previous/next/last arrows to text, you can call the following to generate this:

The Code

    // Set our text options
    var options = {
        pages: 10, 
        text: {
            first: 'First', 
            last: 'Last', 
            next: 'Next', 
            previous: 'Previous'
        }
    };
    
    
    jQuery('.pagination-container').pagination('my-group-name', options, function(group){
        jQuery('#pagination-content').html('Pagination Group: ' + group + '.
Now on page: ' + this)
    });
   		

Custom Templates

Finally, you can update the HTML snippets which define the controllers, to use custom classes, images, etc. In the following example, we update the template for the digits to make them buttons instead of anchor tags.

The Code

    // Set our text options
    var options = {
        pages: 5, 
        templates: {
            number: '<button class="ui-pagination-control ui-pagination-digit"></button>'
        }
    };
    
    jQuery('.pagination-container').pagination('my-group-name', options, function(group){
        jQuery('#pagination-content').html('Pagination Group: ' + group + '.
Now on page: ' + this)
    });
   		

Dcoumentation

Please visit: http://eric.garside.name/docs.html?p=pagination

Current Downloads

The current version of the Pagination plugin can be downloaded from Google Code

Subversion

You can also checkout the subversion repository for the plugin with the following command:

			
   svn checkout http://jquery-curator.googlecode.com/svn/trunk/ jquery-curator-read-only