Simple yet flexible pagination in JavaScript
Checkout javascript-paginator site or github repo for more information.
Full usage with all settings
function yourCallback(args = {}) { paginator.currentPage = args.page; paginator.update("#pagination"); return args; } var options = { callback: yourCallback, totalItems: 100, itemsPerPage: 10, currentPage: 1, options: { outerPagesCount: 2, innerPagesCount: 2 }, labels: { currentPage: "*", previousPage: "prev", nextPage: "next", firstPage: "first", lastPage: "last", gapPage: " " }, features: { autoHide: false, hideGaps: false, hideAdjacent: false, hideDisabled: false, hidePages: false } }; var paginator = new Paginator(options); paginator.render('#pagination'); console.log(paginator.getItemsRange());| Name | Type | State | Description |
|---|---|---|---|
totalItems | Integer | Required | The total number of items. |
currentPage | Integer | Required | The current page. Default: 1 |
callback | Function | Required | Return call with parameters. |
itemsPerPage | Integer | Optional | Adjust the number of items shown per page. Default: 10 |
options.outerPagesCount | Integer | Optional | How many pages to show next to edges. Default: 1 |
options.innerPagesCount | Integer | Optional | How many pages to show around the current page. Default: 1 |
labels.currentPage | String | Optional | Label for the current button. Default: Integer |
labels.previousPage | String | Optional | Label for the previous button. Default: ❮ |
labels.nextPage | String | Optional | Label for the next button. Default: ❯ |
labels.firstPage | String | Optional | Label for the first button. Default: 1 |
labels.lastPage | String | Optional | Label for the last button. Defaults to total page count. |
labels.gapPage | String | Optional | Label for the gap spacing. Default: ... |
features.autoHide | Boolean | Optional | Hide pagination if only one page is present. |
features.hideGaps | Boolean | Optional | Hide the gaps between outer and inner pages. |
features.hideAdjacent | Boolean | Optional | Hide next or previous page. |
features.hideDisabled | Boolean | Optional | Hide pages that aren't clickable. (next and previous) |
features.hidePages | Boolean | Optional | Hide all pages except next and previous |
TBD
- Heavy use of states on every page generation to enable very flexible css targeting
- The pagination shouldn't really understand your data (objects)
- It should be able to generate viable pagination just with basic data
- It should be highly customizable and extendable with features
- It should work for SPA and non-SPA
- Code should be KISS compliant so that it is extendable by other people easily
- Should follow ECMA standards but provide backward compatibility
- Should try to
mildly forcedevelopers into using better standards
- Remove all pages but previous and next (feature
hidePagesimplemented) - Provide many styles of pagination (CSS) /in progress/
- Be able to pass in order for previous and next (planned)
- Feature - rotate from the beginning when you reach the end (undecided)
- Refactor. Split into multiple classes. /some progress/
- Provide code examples and explanations of how to get the project.