A jQuery Pagination Plugin
JavaScript Perl
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
CHANGELOG.txt
LICENSE.txt
README
jquery.pajinate.js
jquery.pajinate.min.js

README

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']
    wrap_around : Next/prev navigation wraps. [default = false]
    show_first_last : Prevents first & last navigation links from loading if set to false. [default = true]
    nav_info_id: String (default ".info_text") The ID or CLASSNAME of the element(s) that will host the nav_label_info text 
    nav_label_info: String (default "Showing {0}-{1} of {2} results") Info text that shows the results that are currently shown and the total number of results in the list. {0}
    jquery_ui: Boolean (default false), if set to true enables jquery ui themes
    jquery_ui_active: String (default "ui-state-highlight") extra jquery ui class to add on active_page
    jquery_ui_default: String (default "ui-state-default") extra jquery ui class to add on all links
    jquery_ui_disabled: String (default "ui-state-disabled") extra jquery ui class to add on disabled links
    onPageDisplayed: Function(pageNumber), This function will be called if it exists and passed the current page number.

    A style class called 'no_more' is added to the first/prev links if the first link is active and similarly for the last/next links. This allows you to give these links a "disabled" appearance if required.

	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 (@wesnolte)