Make the selected elements SimplePager widgets. The SimplePager was designed to be a simple pagination themeable widget.
The simplicity is given with just the minimal requirements of pagination functionality:
In addition to this, the SimplePager also provides the current page with the ability to set it through a text input.
Navigate to a page:
$('#pager').simplepager({totalRecords: 101, switchPage: function(){});
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="jquery.bgiframe.min.js"></script> <script type="text/javascript" src="ui.simplepager.js"></script> <link rel="stylesheet" href="ui.simplepager.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function(){ $('#paging').simplepager({ perPage: 15, totalRecords: 1001, draggable: false, switchPage: function(event,page){ $('#results').html('The page has switched to page: ' + page); } }); }); </script> </head> <body> <p id="results" style="color:#fff;" >Navigate to a page:</p> <div id="paging"></div> </body> </html>
This event is triggered when the page has changed.
switchPage
event as an init option.
$('.selector').simplepager({
switchPage: function(event, page) { ... }
});
switchPage
event by type: simplepagerswitchPage
.
$('.selector').bind('simplepagerswitchPage', function(event, page) {
...
});
The jQuery UI SimplePage plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes that can be modified. These classes are highlighed in bold below.
Note: This is a sample of markup generated by the simplepager plugin, not markup you should use to create a simplepager. The only markup needed for that is <div></div>.