Mick Redman: paginator

Friday, 17 September 2010

jQuery Pagination

This is a nice, simplified version of a jQuery paginator plugin found at http://plugins.jquery.com/project/jquery-pagination
You should get paginator.js from http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js
rather than doing as I have done by referring to it through the download link.

There are many paginator techniques I found this to be the simplest to use and you have more control over the style. Naturally, I kept mine to a minimum to get you started without having to understand all the CSS I've used.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paginator</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
.paginator
{
text-align:center;
}
.paginator .active, .paginator .inactive
{
margin:4px;
text-decoration:none;
}
.paginator .inactive
{
cursor:default;
}
#pages
{
margin:0 auto;
width:200px;
}
#content
{
margin:0 auto;
width:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js"></script>
<script>
$(function ()
{
separator = '';
itemsPerPage = 1;
paginatorPosition = 'bottom';
paginatorStyle = 2;
$("#pages").pagination();
});
</script>
</head>
<body>
<div id="content">
<h1>jQuery Pagination</h1>
<p>For further information see <a href="http://plugins.jquery.com/project/jquery-pagination">http://plugins.jquery.com/project/jquery-pagination</a></p>
<div id="pages">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 6</p>
</div>
</div>
</body>
</html>