ui-paginate
v0.1.12
Published
Flexible pagination with pure javascript
Downloads
6
Readme
ui-paginate
Flexible pagination generation using pure javascript, no dependencies. Created to be as versatile as possible: you can let it create page links and split up element rows accordingly in your html, or use underlying data object to create your own interface and logic.
Caveats/Immediate goals
- This is still an early release, so you may see certain quirks. Please submit feedback if you find anything!
- Better documentation and examples are my priority
- Logic is more or less all in place but certain variable names may change
- Will add unit tests later on
- Need to finalize testing across browsers. This has been working so far on all modern browsers and IE9+
Usage
Install
Via NPM
npm install ui-paginateimport uiPaginate from ‘uiPaginate’
Via old-fashioned way
- Download raw file in
distfolder - Link to it in <head> of document
Initialize
var pager = uiPaginate({
items : ’tr.row’,
paginateContainer : ‘#pagination’
})Where items are the html elements you need grouped by page and paginateContainer is where the links will go. You can also pass in a number or array and work directly with the data object that is used to create the html elements (no DOM needed), and there are many more configuration options available (see below)
Instance Methods
info()
Call at any point to retrieve pertinent info on paginated items. You can use this to customize logic and interface if needed. Returns following object
{
// Currently selected page
current: 0
// Index of the first and last items within the selected page
firstItemIndex: 0
lastItemIndex: 9
isFirst: true
isLast: false
isNearStart: true
isNearEnd: false
// Representing the previous and next pages
next: 1
prev: 0
// General information
itemsPerPage: 10
totalItems: 300
totalPages: 30
}In addition to the generated html links which handle user input, you can also programmatically set pages with the following methods.
setPage(number)
Sets current page to specified number. Remember that this is a zero-based index, similar to dealing with arrays.
next(), prev()
Increments and decrements the current page, respectively. The default value of 1 can be changed
redo(config)
Recreates pagination object, where any new configuration options are merged with existing options. You call this method anytime results or item count changes and you need to 'recount' pages. In those cases you call this method with items property
Configuration options
What you see below are all the default options used to create uiPaginate instance, and can be changed when passing in config object
var defaultOptions = {
// Only required option, can be one of the following
// 1) String representing selector : 'tr.row'
// 2) Nodelist (can be jQuery!) : $('tr.row)
// 3) Array, where length will be used
// 4) Integer
// Providing #3-4 assumes you will add extra logic for showing items
items : null,
itemsPerPage : 10,
startingPage : 0,
// Where pagination elements are appended to. Leaving as false
// assumes you will implement your own pagination controls
// (utilizing info() object). Expects a String selector
paginateContainer : false,
// Given to every pagination element
className : 'page-link',
// Prepended before certain classes for more granular styling
// (button, disabled, first, last)
prefix : 'page-',
// Labels for First and Last buttons, or set to false to hide
skipLabels : ['First', 'Last'],
// Show '1' and last page '#' in addition to First and Last buttons
skipLabelsInclusive : true,
// Labels to show for Previous and Next increments, or false to hide
incrementLabels : ['Prev', 'Next'],
incrementCounter : 1,
// Shown on either side of centerPages when needed. Can set to false to hide,
// though that isn't recommended
divider : "...",
// Don't create pagination elements if its just one page. Set to true
// if there's heavy user interaction (i.e., updating
// page results with filter options)
displaySinglePage : false,
// Number of pages to show on each side. Can be also false or 0
marginPages : 2,
// Number of pages to show in middle
centerPages : 5
// Tag used to create elements. Can be 'div','span','a','li','th', or 'td'
element : "span",
// Hooks
// Function that will be called whenever page changes
// Info parameter is passed containing new pagination info
// (same as calling info() method)
onPageSelected : (info){}
}Examples coming soon! Feel free to submit issues or provide feedback.