Pajinate

by wesnolte

wesnolte / Pajinate

A jQuery Pagination Plugin

208 Stars 100 Forks Last release: Not found Other 41 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

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();

'#idofpagecontainer' should contain the "pagenavigation" and "content" elements.

HTML MARKUP REQUIREMENTS

Paging through lists of items requires some basic HTML markup, some examples follow,

1) Basic Paging.

    
    <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="https://github.com/wesnolte/Pajinate/blob/master/" class="previous_link">Prev</a>
        <a longdesc="0" href="https://github.com/wesnolte/Pajinate/blob/master/" class="page_link">1</a>
        <a longdesc="1" href="https://github.com/wesnolte/Pajinate/blob/master/" class="page_link active_page">2</a>
        <a href="https://github.com/wesnolte/Pajinate/blob/master/" 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)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.