Commits

Yorgos Pagles  committed 85ef1dc

First commit with my changes:
* Addition of nav_display_first_last config option
* Addition of nav_label_ellipse config option

  • Participants

Comments (0)

Files changed (7)

File CHANGELOG.txt

+Pajinate 0.2 (released 2010-04-22)
+
+This version is a minor update. The following new feature were added:
+
+	*	New option 'num_page_links_to_display' which determines how many page numbers to display in the navigation panel. 
+		Default is 20.
+	*	New option 'start_page' which determines which paginated page to display first. 
+		Default is 0.
+	*	New options 'nav_label_first', 'nav_label_prev', 'nav_label_next', 'nav_label_last' which determine the value of the labels in the navigation panel.
+		Defaults are 'First', 'Prev', 'Next', 'Last'.
+	*	New methods added to move the pages numbers shown in the navigation panel to the left or right if we want to move to a page not displayed in the page index list.
+	*	New visual cues have been added which represent whether more page numbers exist but are not currently displayed in the index list. 
+		The cues take the form of ellipses either on the left or right or both of the currently displayed page index numbers.
+		
+In addition to this the following items were fixed:
+
+	*	Hiding and showing page items was enhanced in that instead of using 'display: block' to restore the visibility of an item, it is instead restored to have it's previous CSS
+		'display' value.
+Copyright (c) 2010 Wesley Nolte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+Pajinate - jQuery Pagination Plugin
+Author: 		Wesley Nolte
+
+DEFAULT USAGE
+---------------------------------
+1) Place pajinate-x.x folder somewhere in your website directory structure.
+2) Include script tags for the desired version of the script. 
+3) Create at least one <div> in your HTML with a CSS class value of "page_navigation". The navigation links will be 
+attached to these divs.
+4) Ensure that all items you would like to page through are all the first-children of an HTML element with a CSS 
+class value of "content". The child-elements can be of any tag type.
+5) Call the Pajinate plugin with the function call below:
+
+	$('#id_of_page_container').pajinate();
+
+  '#id_of_page_container' should contain the "page_navigation" and "content" elements.
+	
+
+HTML MARKUP REQUIREMENTS
+---------------------------------
+Paging through lists of items requires some basic HTML markup, some examples follow,
+
+1) 	Basic Paging.
+
+		<div id="page_container">
+			<div class="page_navigation"></div>		
+
+			<ul class="content">
+				<li> <p>One</p> </li>
+				<li> <p>Two</p> </li>
+				<li> <p>Three</p> </li>
+				<li> <p>Four</p> </li>
+				<li> <p>Five</p> </li>
+				<li> <p>Six</p> </li>
+				<li> <p>Seven</p> </li>
+				<li> <p>Eight</p> </li>
+			</ul>
+				
+		</div>
+	
+	This is the simplest type of paging one can have. With all the default options set, the following actions occur 
+	within the plugin (among other things):
+		- The list of items inside '.content' are divided into slices.
+		- The navigation panel is created at attached to the '.page_navigation' element.
+		- The first page is displayed and all others hidden.
+
+	When Pajination is done processing the DIV above, the DOM is modified to look like this:
+
+		<div id="page_container">
+			<div class="page_navigation">
+				<a href="" class="previous_link">Prev</a>
+				<a longdesc="0" href="" class="page_link">1</a>
+				<a longdesc="1" href="" class="page_link active_page">2</a>
+				<a href="" class="next_link">Next</a>
+			</div>
+
+			<ul class="content">
+				 <li><p>One</p></li> 
+				 <li><p>Two</p></li> 
+				 <li><p>Three</p></li> 
+				 <li><p>Four</p></li> 
+				 <li><p>Five</p></li> 
+				 <li><p>Six</p></li> 
+				 <li><p>Seven</p></li> 
+				 <li><p>Eight</p></li> 
+				 <li><p>Nine</p></li> 
+				 <li><p>Ten</p></li> 
+				 <li><p>Eleven</p></li> 
+				 <li><p>Twelve</p></li> 
+				 <li><p>Thirteen</p></li> 
+				 <li><p>Fourteen</p></li> 
+				 <li><p>Fifteen</p></li> 
+				 <li><p>Sixteen</p></li>
+			</ul>
+		</div>
+	
+	Note the links that have been added to #page_navigation.
+	
+2)	Advanced Paging
+
+	The plugin offers several initialisation options:
+	
+		items_per_page : A number which determines the maximum number of items to show on any 'page'. [default = 10]
+		item_container_id : The ID or CLASSNAME of the element that contains all the list items. [default = '.content']
+		nav_panel_id : The ID or CLASSNAME of the element(s) that host the navigation links. [default = '.page_navigation']
+		num_page_links_to_display : The number of page links to display at one time i.e. if you have a total of 20 page links
+					    but only want to display 3 at a time set this value to 3. [default = 20]
+		start_page : The page number you'd like to display first [default = 0]
+		nav_label_first : The label for the link that navigates to the first paginated page. [default = 'First']
+		nav_label_prev : The label for the link that navigates to the previous paginated page. [default = 'Prev']
+		nav_label_next : The label for the link that navigates to the next paginated page. [default = 'Next']
+		nav_label_last : The label for the link that navigates to the last paginated page. [default = 'Last']
+		nav_display_first_last : If the first an last page links should appear. [default = 'true']
+		nav_label_ellipse : The symbols to use when there are pages not displayed in the list. [default = '...']
+
+	Note that you can add any element tag to the list of pageable items.
+
+Drop me a message if you have any questions or comments:
+
+twitter (@weesildotn) 

File examples/css/styles.css

+* {
+	margin: 0;
+	padding: 0;
+}
+
+body{
+	font-family: Verdana;
+	font-size: 12px;
+	background-color: black;
+	text-align: center;
+	height: 100%;
+}
+
+div{
+	overflow: auto;
+}
+
+h1, h2 {
+	font-family: Georgia;
+	font-style: italic;
+}
+
+h2{
+	font-size: 16px;	
+	color: #333333;
+	padding-bottom: 5px;
+}
+
+h1{
+	padding: 10px;
+	font-size: 36px;
+	color: white;
+}
+
+li{
+	list-style: none;	
+}
+
+#wrapper{
+	margin: 0px auto;
+	text-align: left;
+	width: 960px;
+}
+
+#paging_container1{
+	height: 320px;	
+}
+
+#paging_container2{
+	height: 356px;	
+}
+
+#paging_container3{
+	height: 190px;
+}
+
+#paging_container4{
+	height: 307px;	
+	overflow: hidden;
+}
+
+.ellipse{
+	float: left;
+}
+
+.container{
+	width: 260px;
+	float: left;
+	margin: 50px 10px 10px;
+	padding: 20px;
+	background-color: white;
+}
+
+.page_navigation , .alt_page_navigation{
+	padding-bottom: 10px;
+}
+
+.page_navigation a, .alt_page_navigation a{
+	padding:3px 5px;
+	margin:2px;
+	color:white;
+	text-decoration:none;
+	float: left;
+	font-family: Tahoma;
+	font-size: 12px;
+	background-color:#DB5C04;
+}
+.active_page{
+	background-color:white !important;
+	color:black !important;
+}	
+
+.content, .alt_content{
+	color: black;
+}
+
+.content li, .alt_content li, .content > p{
+	padding: 5px
+}

File examples/example1.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<title>jQuery Pajinate - by Wes Nolte</title>
+		
+		<link type="text/css" rel="stylesheet" href="css/styles.css" />
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+		<script type="text/javascript" src="js/jquery.pajinate.js"></script>
+		
+		<script type="text/javascript">
+			$(document).ready(function(){
+				$('#paging_container1').pajinate();
+			});
+			
+			$(document).ready(function(){
+				$('#paging_container2').pajinate();
+			});		
+
+			$(document).ready(function(){
+				$('#paging_container3').pajinate({
+					items_per_page : 5,
+					item_container_id : '.alt_content',
+					nav_panel_id : '.alt_page_navigation'
+					
+				});
+			});	
+			
+			$(document).ready(function(){
+				$('#paging_container4').pajinate({
+		                    num_page_links_to_display:0,
+		                    nav_label_ellipse:'',
+		                    nav_display_first_last: false
+		                });
+			});	
+			
+			$(document).ready(function(){
+				$('#paging_container5').pajinate({
+					nav_label_first : '<<',
+					nav_label_last : '>>',
+					nav_label_prev : '<',
+					nav_label_next : '>'
+				});
+			});	
+			
+			$(document).ready(function(){
+				$('#paging_container6').pajinate({
+					start_page : 2,
+					items_per_page : 5	
+				});
+			});	
+			
+			$(document).ready(function(){
+				$('#paging_container7').pajinate({
+					num_page_links_to_display : 3,
+					items_per_page : 6	
+				});
+			});										
+		</script>
+
+	</head>
+	<body>
+		<h1>jQuery Pajinate</h1>		
+		
+		<div id="wrapper">
+			<div id="paging_container1" class="container">
+				<h2>Vanilla</h2>
+				<div class="page_navigation"></div>
+				
+				<ul class="content">
+					 <li><p>One</p></li> 
+					 <li><p>Two</p></li> 
+					 <li><p>Three</p></li> 
+					 <li><p>Four</p></li> 
+					 <li><p>Five</p></li> 
+					 <li><p>Six</p></li> 
+					 <li><p>Seven</p></li> 
+					 <li><p>Eight</p></li> 
+					 <li><p>Nine</p></li> 
+					 <li><p>Ten</p></li> 
+					 <li><p>Eleven</p></li> 
+					 <li><p>Twelve</p></li> 
+					 <li><p>Thirteen</p></li> 
+					 <li><p>Fourteen</p></li> 
+					 <li><p>Fifteen</p></li> 
+					 <li><p>Sixteen</p></li> 
+				</ul>	
+			</div>	
+			
+			<div id="paging_container3" class="container">
+				<h2>Custom List Size</h2>
+				<div class="alt_page_navigation"></div>
+				
+				<ul class="alt_content">
+					 <li><p>One</p></li> 
+					 <li><p>Two</p></li> 
+					 <li><p>Three</p></li> 
+					 <li><p>Four</p></li> 
+					 <li><p>Five</p></li> 
+					 <li><p>Six</p></li> 
+					 <li><p>Seven</p></li> 
+					 <li><p>Eight</p></li> 
+					 <li><p>Nine</p></li> 
+					 <li><p>Ten</p></li> 
+					 <li><p>Eleven</p></li> 
+					 <li><p>Twelve</p></li> 
+					 <li><p>Thirteen</p></li> 
+					 <li><p>Fourteen</p></li> 
+					 <li><p>Fifteen</p></li> 
+					 <li><p>Sixteen</p></li> 
+				</ul>	
+				
+			</div>
+			
+			
+			<div id="paging_container2" class="container">
+				<h2>Two Nav Panels</h2>
+				<div class="page_navigation"></div>
+				
+				<ul class="content">
+					 <li><p>One</p></li> 
+					 <li><p>Two</p></li> 
+					 <li><p>Three</p></li> 
+					 <li><p>Four</p></li> 
+					 <li><p>Five</p></li> 
+					 <li><p>Six</p></li> 
+					 <li><p>Seven</p></li> 
+					 <li><p>Eight</p></li> 
+					 <li><p>Nine</p></li> 
+					 <li><p>Ten</p></li> 
+					 <li><p>Eleven</p></li> 
+					 <li><p>Twelve</p></li> 
+					 <li><p>Thirteen</p></li> 
+					 <li><p>Fourteen</p></li> 
+					 <li><p>Fifteen</p></li> 
+					 <li><p>Sixteen</p></li> 
+				</ul>	
+				
+				<div class="page_navigation"></div>
+				
+			</div>	
+
+			
+			<div id="paging_container6" class="container">
+				<h2>Custom Start Page</h2>
+				<div class="page_navigation"></div>
+				
+				<ul class="content">
+					 <li><p>One</p></li> 
+					 <li><p>Two</p></li> 
+					 <li><p>Three</p></li> 
+					 <li><p>Four</p></li> 
+					 <li><p>Five</p></li> 
+					 <li><p>Six</p></li> 
+					 <li><p>Seven</p></li> 
+					 <li><p>Eight</p></li> 
+					 <li><p>Nine</p></li> 
+					 <li><p>Ten</p></li> 
+					 <li><p>Eleven</p></li> 
+					 <li><p>Twelve</p></li> 
+					 <li><p>Thirteen</p></li> 
+					 <li><p>Fourteen</p></li> 
+					 <li><p>Fifteen</p></li> 
+					 <li><p>Sixteen</p></li> 
+				</ul>	
+				
+			</div>					
+			
+			<div id="paging_container4" class="container">
+				<h2>Mixed List Element Types</h2>
+				<div class="page_navigation"></div>
+				
+				<div class="content">
+					 <p>One</p> 
+					 <span style="font-size:18px">Two</span> 
+					 <p>Three</p> 
+					 <p>Four</p> 
+					 <p>Five</p> 
+					 <p>Six</p> 
+					 <div style="color: red">Seven</div> 
+					 <p>Eight</p> 
+					 <a href="#">Nine</a> 
+					 <p>Ten</p> 
+					 <p>Eleven</p> 
+					 <p>Twelve</p> 
+					 <p>Thirteen</p> 
+					 <p>Fourteen</p> 
+					 <p>Fifteen</p> 
+					 <p>Sixteen</p> 
+				</div>	
+				
+			</div>	
+			
+			<div id="paging_container5" class="container">
+				<h2>Custom Navigation Labels</h2>
+				<div class="page_navigation"></div>
+				
+				<ul class="content">
+					 <li><p>One</p></li> 
+					 <li><p>Two</p></li> 
+					 <li><p>Three</p></li> 
+					 <li><p>Four</p></li> 
+					 <li><p>Five</p></li> 
+					 <li><p>Six</p></li> 
+					 <li><p>Seven</p></li> 
+					 <li><p>Eight</p></li> 
+					 <li><p>Nine</p></li> 
+					 <li><p>Ten</p></li> 
+					 <li><p>Eleven</p></li> 
+					 <li><p>Twelve</p></li> 
+					 <li><p>Thirteen</p></li> 
+					 <li><p>Fourteen</p></li> 
+					 <li><p>Fifteen</p></li> 
+					 <li><p>Sixteen</p></li> 
+				</ul>	
+				
+			</div>		
+			
+			<div id="paging_container7" class="container">
+				<h2>Show Subset of Page Links</h2>
+				<div class="page_navigation"></div>
+				
+				<ul class="content">
+					 <li><p>One</p></li> 
+					 <li><p>Two</p></li> 
+					 <li><p>Three</p></li> 
+					 <li><p>Four</p></li> 
+					 <li><p>Five</p></li> 
+					 <li><p>Six</p></li> 
+					 <li><p>Seven</p></li> 
+					 <li><p>Eight</p></li> 
+					 <li><p>Nine</p></li> 
+					 <li><p>Ten</p></li> 
+					 <li><p>Eleven</p></li> 
+					 <li><p>Twelve</p></li> 
+					 <li><p>Thirteen</p></li> 
+					 <li><p>Fourteen</p></li> 
+					 <li><p>Fifteen</p></li> 
+					 <li><p>Sixteen</p></li> 
+					 <li><p>Seventeen</p></li> 
+					 <li><p>Eightteen</p></li> 
+					 <li><p>Nineteen</p></li> 
+					 <li><p>Twintig</p></li> 
+					 <li><p>Een en Twintig</p></li> 
+					 <li><p>Twee en Twintig</p></li> 
+					 <li><p>Dree en Twintig</p></li> 
+					 <li><p>Vier en Twintig</p></li> 
+					 <li><p>Fyf en Twintig</p></li> 
+					 <li><p>Twenty Six</p></li> 
+					 <li><p>Twenty Seven</p></li> 
+					 <li><p>Twenty Eight</p></li> 
+					 <li><p>Twenty Nine</p></li> 
+					 <li><p>Dertig</p></li> 
+					 <li><p>Een en Dertig</p></li> 
+					 <li><p>Twee en Dertig</p></li> 					 
+				</ul>	
+				
+			</div>										
+		
+		</div>
+		
+		<script>
+			$(document).ready(function(){
+				$('li:odd, .content > *:odd').css('background-color','#FFD9BF');
+			});
+		</script>
+	
+	</body>
+</html>

File examples/js/jquery.pajinate.js

+;(function($){
+/*******************************************************************************************/	
+// jquery.pajinate.js - version 0.2
+// A jQuery plugin for paginating through any number of DOM elements
+// 
+// Copyright (c) 2010, Wes Nolte (http://wesnolte.com)
+// Liscensed under the MIT License (MIT-LICENSE.txt)
+// http://www.opensource.org/licenses/mit-license.php
+// Created: 2010-04-16 | Updated: 2010-04-26
+/*******************************************************************************************/
+
+	$.fn.pajinate = function(options){
+		// Set some state information
+		var current_page = 'current_page';
+		var items_per_page = 'items_per_page';
+		
+		var meta;
+	
+		// Setup default option values
+		var defaults = {
+			item_container_id : '.content',
+			items_per_page : 10,			
+			nav_panel_id : '.page_navigation',
+			num_page_links_to_display : 20,			
+			start_page : 0,
+			nav_label_first : 'First',
+			nav_label_prev : 'Prev',
+			nav_label_next : 'Next',
+		        nav_label_last : 'Last',
+		        nav_display_first_last: true,
+		        nav_label_ellipse : '...'
+		};
+		var options = $.extend(defaults,options);
+		var $item_container;
+		var $page_container;
+		var $items;
+		var $nav_panels;
+	
+		return this.each(function(){
+			$page_container = $(this);
+			$item_container = $(this).find(options.item_container_id);
+			$items = $page_container.find(options.item_container_id).children();
+			meta = $page_container;
+			
+			// Initialise meta data
+			meta.data(current_page,0);
+			meta.data(items_per_page, options.items_per_page);
+					
+			// Get the total number of items
+			var total_items = $item_container.children().size();
+			
+			// Calculate the number of pages needed
+			var number_of_pages = Math.ceil(total_items/options.items_per_page);
+			
+			// Construct the nav bar
+			var more = '<span class="ellipse more">' + options.nav_label_ellipse + '</span>';
+			var less = '<span class="ellipse less">' + options.nav_label_ellipse + '</span>';
+			
+		    var navigation_html = options.nav_display_first_last ? '<a class="first_link" href="">'+ options.nav_label_first +'</a>' : "";
+			navigation_html += '<a class="previous_link" href="">'+ options.nav_label_prev +'</a>'+ less;
+			var current_link = 0;
+			while(number_of_pages > current_link){
+				navigation_html += '<a class="page_link" href="" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
+				current_link++;
+			}
+			navigation_html += more + '<a class="next_link" href="">'+ options.nav_label_next +'</a>';
+		    navigation_html += options.nav_display_first_last ? '<a class="last_link" href="">'+ options.nav_label_last +'</a>' : "";
+			
+			// And add it to the appropriate area of the DOM	
+			$nav_panels = $page_container.find(options.nav_panel_id);			
+			$nav_panels.html(navigation_html).each(function(){
+			
+				$(this).find('.page_link:first').addClass('first');
+				$(this).find('.page_link:last').addClass('last');
+				
+			});
+			
+			// Hide the more/less indicators
+			$nav_panels.children('.ellipse').hide();
+			
+			// Set the active page link styling
+			$nav_panels.find('.previous_link').next().next().addClass('active_page');
+			
+			/* Setup Page Display */
+			// And hide all pages
+			$items.hide();
+			// Show the first page			
+			$items.slice(0, meta.data(items_per_page)).show();
+
+			/* Setup Nav Menu Display */
+			// Page number slices
+			
+			var total_page_no_links = $page_container.children(options.nav_panel_id+':first').children('.page_link').size();
+			options.num_page_links_to_display = Math.min(options.num_page_links_to_display,total_page_no_links);
+
+			$nav_panels.children('.page_link').hide(); // Hide all the page links
+			
+			// And only show the number we should be seeing
+			$nav_panels.each(function(){
+				$(this).children('.page_link').slice(0, options.num_page_links_to_display).show();			
+			});
+			
+			/* Bind the actions to their respective links */
+			 
+			// Event handler for 'First' link
+			$page_container.find('.first_link').click(function(e){
+				e.preventDefault();
+				
+				movePageNumbersRight($(this),0);
+				goto(0);				
+			});			
+			
+			// Event handler for 'Last' link
+			$page_container.find('.last_link').click(function(e){
+				e.preventDefault();
+				var lastPage = total_page_no_links - 1;
+				movePageNumbersLeft($(this),lastPage);
+				goto(lastPage);				
+			});			
+			
+			// Event handler for 'Prev' link
+			$page_container.find('.previous_link').click(function(e){
+				e.preventDefault();
+				showPrevPage($(this));
+			});
+			
+			
+			// Event handler for 'Next' link
+			$page_container.find('.next_link').click(function(e){
+				e.preventDefault();				
+				showNextPage($(this));
+			});
+			
+			// Event handler for each 'Page' link
+			$page_container.find('.page_link').click(function(e){
+				e.preventDefault();
+				goto($(this).attr('longdesc'));
+			});			
+			
+			// Goto the required page
+			goto(parseInt(options.start_page));
+			toggleMoreLess();
+		});
+		
+		function showPrevPage(e){
+			new_page = parseInt(meta.data(current_page)) - 1;						
+			
+			// Check that we aren't on a boundary link
+			if($(e).siblings('.active_page').prev('.page_link').length==true){
+				movePageNumbersRight(e,new_page);
+				goto(new_page);
+			}
+				
+		};
+			
+		function showNextPage(e){
+			new_page = parseInt(meta.data(current_page)) + 1;
+			
+			// Check that we aren't on a boundary link
+			if($(e).siblings('.active_page').next('.page_link').length==true){		
+				movePageNumbersLeft(e,new_page);
+				goto(new_page);
+			}
+				
+		};
+			
+		function goto(page_num){
+			
+			var ipp = meta.data(items_per_page);
+			
+			var isLastPage = false;
+			
+			// Find the start of the next slice
+			start_from = page_num * ipp;
+			
+			// Find the end of the next slice
+			end_on = start_from + ipp;
+			// Hide the current page	
+			$items.hide()
+					.slice(start_from, end_on)
+					.show();
+			
+			// Reassign the active class
+			$page_container.find(options.nav_panel_id).children('.page_link[longdesc=' + page_num +']').addClass('active_page')
+													 .siblings('.active_page')
+													 .removeClass('active_page');										 
+			
+			// Set the current page meta data							
+			meta.data(current_page,page_num);
+			
+			// Hide the more and/or less indicators
+			toggleMoreLess();
+		};	
+		
+		// Methods to shift the diplayed index of page numbers to the left or right
+		function movePageNumbersLeft(e, new_p){
+			var new_page = new_p;
+			
+			var $current_active_link = $(e).siblings('.active_page');
+		
+			if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){
+				
+				$nav_panels.each(function(){
+							$(this).children('.page_link')
+								.hide() // Hide all the page links
+								.slice(parseInt(new_page - options.num_page_links_to_display + 1) , new_page + 1)
+								.show();		
+							});
+			}
+			
+		} 
+		
+		function movePageNumbersRight(e, new_p){
+			var new_page = new_p;
+			
+			var $current_active_link = $(e).siblings('.active_page');
+			
+			if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){
+												
+				$nav_panels.each(function(){
+							$(this).children('.page_link')
+								.hide() // Hide all the page links
+								.slice( new_page , new_page + parseInt(options.num_page_links_to_display))
+								.show();
+							});
+			}
+		}
+		
+		// Show or remove the ellipses that indicate that more page numbers exist in the page index than are currently shown
+		function toggleMoreLess(){
+													 
+			if(!$nav_panels.children('.page_link:visible').hasClass('last')){					
+				$nav_panels.children('.more').show();
+			}else {
+				$nav_panels.children('.more').hide();
+			}
+			
+			if(!$nav_panels.children('.page_link:visible').hasClass('first')){
+				$nav_panels.children('.less').show();
+			}else {
+				$nav_panels.children('.less').hide();
+			}			
+		}
+		
+	};
+	
+})(jQuery);

File jquery.pajinate.js

+;(function($){
+/*******************************************************************************************/	
+// jquery.pajinate.js - version 0.2
+// A jQuery plugin for paginating through any number of DOM elements
+// 
+// Copyright (c) 2010, Wes Nolte (http://wesnolte.com)
+// Liscensed under the MIT License (MIT-LICENSE.txt)
+// http://www.opensource.org/licenses/mit-license.php
+// Created: 2010-04-16 | Updated: 2010-04-26
+/*******************************************************************************************/
+
+	$.fn.pajinate = function(options){
+		// Set some state information
+		var current_page = 'current_page';
+		var items_per_page = 'items_per_page';
+		
+		var meta;
+	
+		// Setup default option values
+		var defaults = {
+			item_container_id : '.content',
+			items_per_page : 10,			
+			nav_panel_id : '.page_navigation',
+			num_page_links_to_display : 20,			
+			start_page : 0,
+			nav_label_first : 'First',
+			nav_label_prev : 'Prev',
+			nav_label_next : 'Next',
+			nav_label_last : 'Last'
+		};
+		var options = $.extend(defaults,options);
+		var $item_container;
+		var $page_container;
+		var $items;
+		var $nav_panels;
+	
+		return this.each(function(){
+			$page_container = $(this);
+			$item_container = $(this).find(options.item_container_id);
+			$items = $page_container.find(options.item_container_id).children();
+			meta = $page_container;
+			
+			// Initialise meta data
+			meta.data(current_page,0);
+			meta.data(items_per_page, options.items_per_page);
+					
+			// Get the total number of items
+			var total_items = $item_container.children().size();
+			
+			// Calculate the number of pages needed
+			var number_of_pages = Math.ceil(total_items/options.items_per_page);
+			
+			// Construct the nav bar
+			var more = '<span class="ellipse more">...</span>';
+			var less = '<span class="ellipse less">...</span>';
+			
+			var navigation_html = '<a class="first_link" href="">'+ options.nav_label_first +'</a>';
+			navigation_html += '<a class="previous_link" href="">'+ options.nav_label_prev +'</a>'+ less;
+			var current_link = 0;
+			while(number_of_pages > current_link){
+				navigation_html += '<a class="page_link" href="" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
+				current_link++;
+			}
+			navigation_html += more + '<a class="next_link" href="">'+ options.nav_label_next +'</a>';
+			navigation_html += '<a class="last_link" href="">'+ options.nav_label_last +'</a>';
+			
+			// And add it to the appropriate area of the DOM	
+			$nav_panels = $page_container.find(options.nav_panel_id);			
+			$nav_panels.html(navigation_html).each(function(){
+			
+				$(this).find('.page_link:first').addClass('first');
+				$(this).find('.page_link:last').addClass('last');
+				
+			});
+			
+			// Hide the more/less indicators
+			$nav_panels.children('.ellipse').hide();
+			
+			// Set the active page link styling
+			$nav_panels.find('.previous_link').next().next().addClass('active_page');
+			
+			/* Setup Page Display */
+			// And hide all pages
+			$items.hide();
+			// Show the first page			
+			$items.slice(0, meta.data(items_per_page)).show();
+
+			/* Setup Nav Menu Display */
+			// Page number slices
+			
+			var total_page_no_links = $page_container.children(options.nav_panel_id+':first').children('.page_link').size();
+			options.num_page_links_to_display = Math.min(options.num_page_links_to_display,total_page_no_links);
+
+			$nav_panels.children('.page_link').hide(); // Hide all the page links
+			
+			// And only show the number we should be seeing
+			$nav_panels.each(function(){
+				$(this).children('.page_link').slice(0, options.num_page_links_to_display).show();			
+			});
+			
+			/* Bind the actions to their respective links */
+			 
+			// Event handler for 'First' link
+			$page_container.find('.first_link').click(function(e){
+				e.preventDefault();
+				
+				movePageNumbersRight($(this),0);
+				goto(0);				
+			});			
+			
+			// Event handler for 'Last' link
+			$page_container.find('.last_link').click(function(e){
+				e.preventDefault();
+				var lastPage = total_page_no_links - 1;
+				movePageNumbersLeft($(this),lastPage);
+				goto(lastPage);				
+			});			
+			
+			// Event handler for 'Prev' link
+			$page_container.find('.previous_link').click(function(e){
+				e.preventDefault();
+				showPrevPage($(this));
+			});
+			
+			
+			// Event handler for 'Next' link
+			$page_container.find('.next_link').click(function(e){
+				e.preventDefault();				
+				showNextPage($(this));
+			});
+			
+			// Event handler for each 'Page' link
+			$page_container.find('.page_link').click(function(e){
+				e.preventDefault();
+				goto($(this).attr('longdesc'));
+			});			
+			
+			// Goto the required page
+			goto(parseInt(options.start_page));
+			toggleMoreLess();
+		});
+		
+		function showPrevPage(e){
+			new_page = parseInt(meta.data(current_page)) - 1;						
+			
+			// Check that we aren't on a boundary link
+			if($(e).siblings('.active_page').prev('.page_link').length==true){
+				movePageNumbersRight(e,new_page);
+				goto(new_page);
+			}
+				
+		};
+			
+		function showNextPage(e){
+			new_page = parseInt(meta.data(current_page)) + 1;
+			
+			// Check that we aren't on a boundary link
+			if($(e).siblings('.active_page').next('.page_link').length==true){		
+				movePageNumbersLeft(e,new_page);
+				goto(new_page);
+			}
+				
+		};
+			
+		function goto(page_num){
+			
+			var ipp = meta.data(items_per_page);
+			
+			var isLastPage = false;
+			
+			// Find the start of the next slice
+			start_from = page_num * ipp;
+			
+			// Find the end of the next slice
+			end_on = start_from + ipp;
+			// Hide the current page	
+			$items.hide()
+					.slice(start_from, end_on)
+					.show();
+			
+			// Reassign the active class
+			$page_container.find(options.nav_panel_id).children('.page_link[longdesc=' + page_num +']').addClass('active_page')
+													 .siblings('.active_page')
+													 .removeClass('active_page');										 
+			
+			// Set the current page meta data							
+			meta.data(current_page,page_num);
+			
+			// Hide the more and/or less indicators
+			toggleMoreLess();
+		};	
+		
+		// Methods to shift the diplayed index of page numbers to the left or right
+		function movePageNumbersLeft(e, new_p){
+			var new_page = new_p;
+			
+			var $current_active_link = $(e).siblings('.active_page');
+		
+			if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){
+				
+				$nav_panels.each(function(){
+							$(this).children('.page_link')
+								.hide() // Hide all the page links
+								.slice(parseInt(new_page - options.num_page_links_to_display + 1) , new_page + 1)
+								.show();		
+							});
+			}
+			
+		} 
+		
+		function movePageNumbersRight(e, new_p){
+			var new_page = new_p;
+			
+			var $current_active_link = $(e).siblings('.active_page');
+			
+			if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){
+												
+				$nav_panels.each(function(){
+							$(this).children('.page_link')
+								.hide() // Hide all the page links
+								.slice( new_page , new_page + parseInt(options.num_page_links_to_display))
+								.show();
+							});
+			}
+		}
+		
+		// Show or remove the ellipses that indicate that more page numbers exist in the page index than are currently shown
+		function toggleMoreLess(){
+													 
+			if(!$nav_panels.children('.page_link:visible').hasClass('last')){					
+				$nav_panels.children('.more').show();
+			}else {
+				$nav_panels.children('.more').hide();
+			}
+			
+			if(!$nav_panels.children('.page_link:visible').hasClass('first')){
+				$nav_panels.children('.less').show();
+			}else {
+				$nav_panels.children('.less').hide();
+			}			
+		}
+		
+	};
+	
+})(jQuery);