jQuery paginate
Summary
jquery-paginate is a simple jquery plugin that allows html websites to paginate tables and other kind of containers.
A working example can be found here.
Installation
Install this package as a bower dependecy with:
bower install jquery-paginate or with:
npm install jquery-paginate or download the jquery-paginate.min.js file and include it in your website:
<!-- Add it after your jquery file! --> <script src='jquery.min.js'></script> <script src='jquery-paginate.min.js'></script>Basic usage
Imagine the following html table:
<table id="myTable"> <thead> <tr> <td>Header 1</td> <td>Header 2</td> </tr> </thead> <tbody> <tr> <td>Row 1 Col 1</td> <td>Row 1 Col 2</td> </tr> <tr> <td>Row 2 Col 1</td> <td>Row 2 Col 2</td> </tr> <!-- ... --> </tbody> </table>You can paginate your table by using the paginate method on your selector object:
$('#myTable').paginate({ limit: 10 });A navigation bar will be created under the table, and the table will show 10 elements per page. You can style that navigation bar with the your custom css:
.page-navigation a { margin: 0 2px; display: inline-block; padding: 3px 5px; color: #ffffff; background-color: #70b7ec; border-radius: 5px; text-decoration: none; font-weight: bold; } .page-navigation a[data-selected] { background-color: #3d9be0; }See this working demo. You can see the available options in the Advanced options section.
Advanced options
| Option name | Default value | Description |
|---|---|---|
limit | 20 | Elements shown per page. |
initialPage | 0 | Default selected page, being 0 the first one. |
previous | true | Previous button, to move to the previous page. |
previousText | '<' | Text for Previous button. Will be shown only if previous is true. |
next | true | Next button, to move to the next page. |
nextText | '>' | Text for Next button. Will be shown only if next is true. |
first | true | First button, to move to first page. |
firstText | '>' | Text for First button. Will be shown only if first is true. |
last | true | Last button, to move to last page. |
lastText | '>' | Text for Last button. Will be shown only if last is true. |
optional | true | If this option is true, then the pagination menu will be added only if the container has more elements than the limit value. i.e. Will be added only if there are more than 1 page. |
onCreate | null | A callback to be called when the pagination is initialized. Should have the following structure: function(jquery_table_object) {} |
onSelect | null | A callback to be called when any page is selected. Should have the following structure: function(jquery_table_object, current_page_index) {} |
childrenSelector | 'tbody > tr' | A jquery selector string to extract the table children. This can be handy if you are working with divs instead of tables. |
navigationWrapper | null | A jquery object to append the navigation bar to it. This can be used to put your navigation bar on a sticky footer, for example. If null, then it will be added after the table. |
navigationClass | 'page-navigation' | A css class name applied to the navigation menu bar. Can contain multiple classes names, separated with spaces. |
pageToText | function(i) { return (i + 1).toString(); } | A javascript function to transform the current page index (0...N-1) to a string, shown in the navigation menu. |
For example, a working example with all options:
$('#myTable').paginate({ limit: 10, // 10 elements per page initialPage: 1, // Start on second page previous: true, // Show previous button previousText: 'Previous page', // Change previous button text next: true, // Show previous button nextText: 'Next page', // Change next button text first: true, // Show first button firstText: 'First', // Change first button text last: true, // Show last button lastText: 'Last', // Change last button text optional: false, // Always show the navigation menu onCreate: function(obj) { console.log('Pagination done!'); } // `onCreate` callback onSelect: function(obj, i) { console.log('Page ' + i + ' selected!'); } // `onSelect` callback childrenSelector: 'tbody > tr.ugly', // Paginate the rows with the `ugly` class navigationWrapper: $('div#myNavWrapper'), // Append the navigation menu to the `#myNavWrapper` div navigationClass: 'my-page-navigation', // New css class added to the navigation menu pageToText: function(i) { return (i + 1).toString(16); } // Page numbers will be shown on hexadecimal notation });Authors
This project has been developed by:
| Avatar | Name | Nickname | |
|---|---|---|---|
 | Daniel Herzog | Wikiti | [email protected] |
