JavaScript Paginator

Simple yet flexible pagination in JavaScript

Checkout javascript-paginator site or github repo for more information.

Code Example

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());

Options

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

Installation

TBD

Ideology

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 force developers into using better standards

TODO

Remove all pages but previous and next (feature hidePages implemented)
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.