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.