Need help with Pajinate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

wesnolte
208 Stars 100 Forks Other 41 Commits 30 Opened issues

Description

A jQuery Pagination Plugin

Services available

!
?

Need anything else?

Contributors list

# 69,852
CSS
Perl
14 commits
# 473,580
Python
Shell
Perl
3 commits
# 482,210
JavaScr...
Perl
2 commits
# 378,455
Shell
test-fr...
mocha
CSS
1 commit
# 583,948
JavaScr...
Perl
1 commit
# 34,244
HTML
CSS
1 commit
# 23,957
Ruby
Go
datadog
Amazon ...
1 commit
# 580,442
JavaScr...
Perl
1 commit
# 66,353
HTML
SQL
kafka-c...
kafka
1 commit

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.