jQpaginate

Demo

How To Use

Step 1: Include relative javascript files

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQpaginate.js"></script>

Step 2 (optional): Include stylesheet file

<link rel="stylesheet" href="styles.css" media="screen"/>

Step 3: call your function on table placeholder

<script>
    $(function() {
        $('table#myTable').paginate({
             perPage: 10,
             theme: 'dark',
             links: '#links',
             position: '#pos'
        });
    });
</script>
        

The HTML layout

<div id="links"></div><div id="pos"></div>
<table id="myTable" >
   <thead>
       <tr>
       <!-- All rows & other content within thead will remain static !-->
       </tr>
    </thead>
    <tbody>
       <!-- All rows contained in tbody will be used to paginate !-->
    </tbody>
</table>
        

Available Options

perPage	Integer	Default: 10	Number of items displayed on each page.
displayedPages	Integer	Default: 2	How many page numbers should be visible while navigating. Minimum allowed: 2 (previous, current & next)
currentPage	Integer	Default: 1	Which page will be selected immediately after init.
hrefTextPrefix	String	Default: "#page"	A string used to build the href attribute, added before the page number.
links	String	Default: null	ID Tag where pagination links will be displayed.
positionLinks	String	Default: null	ID Tag where results container will be displayed.
theme	String	Default: "light"	The class of the CSS theme.
dataTable	String	Default: "tbody tr"	Table section that will be paginated.
skipper	Boolean	Default: True	Display skipping links that jump a certain number of pages.
quickEdit	Boolean	Default: True	Allows to quickly go to a certain page number by clicking on the current page number.
quickEditType	String	Default: 'click'	In relation with quickEdit. Option 1: 'dblclick' (double click) Option 2: 'click' (click once)
pageOnly	Boolean	Default: False	True: displays page number and total pages. False: displays only page number
onInit	Function	Optional	Function to call when the pagination is initialized.

Support & Feedback