anyPaginator <img src="balanselogo_85x95.png" align="right">

An easy to use, yet advanced and fully customizable Javascript/jQuery paginator plugin. anyPaginator is a spinoff of the <a href="https://github.com/arnemorken/anyvista">anyVista</a> project and we think it's the best Javascript paginator out there.

Take a look at the jsFiddle demos:

"Hello world": https://jsfiddle.net/arnemorken/2qf7k4cs/59/
Page or item mode: https://jsfiddle.net/arnemorken/q72byd8f/5/
Image pagination: https://jsfiddle.net/arnemorken/fm2hpgc0/4/
Local table data: https://jsfiddle.net/arnemorken/0snofdq7/40/
Remote table data: https://jsfiddle.net/arnemorken/kou1r0e6/33/

Both pages and items can be added to the paginator. In the latter case, page buttons will be added automatically as needed. The recommended method is to simply set the "numItems" option. Pages and/or items may be added or removed dynamically at any time.

The user provides a callback function to redraw data whenever a button is pressed, anyPaginator takes care of the rest. The callback function will receive the pager as its only parameter.

Download

Current version: 1.1.0

Github repository: https://github.com/arnemorken/anypaginator/
Balanse Software (minified): https://balanse.info/cdn/anypaginator/anypaginator-1.1.0.min.zip
Balanse Software (source/examples): https://balanse.info/cdn/anypaginator/anypaginator-1.1.0.zip

Usage

Include the anyPaginator Javascript and CSS files:

<script src="/path/to/anyPaginator.js"></script>
<link  href="/path/to/anyPaginator.css" rel="stylesheet"/>

Provide a place for the paginator and its' associated data to live:

<div id="mypager"></div>
<div id="mydata"></div>

Initialize the paginator and add some pages:

let pager = $("#mypager").anyPaginator({ onClick: refreshData });
pager.numItems(200);

Display some data initially:

refreshData(pager);

Have the onClick calback function redraw the data according to the page number selected:

function refreshData(pager)
{
  $("#mydata").empty();
  let start = (pager.currentPage() - 1) * pager.options.itemsPerPage + 1;
  let stop  = start + pager.options.itemsPerPage - 1;
  for (let i=start; i<=stop; i++)
    $("#mydata").append("<p>Hello row "+i+"</p>");
}

API

Options

| Option | Description | Type | Default | | ---------------------------- | -------------------------------------------------------------- | ---------------------------- | -------------------------- | | mode | 0: buttons, 1: page number, 2: item range. | Number | 0 | | hideIfOne | If true, hide the paginator if there is only one page | Boolean | true | | itemsPerPage | Number of items per page | Number | 20 | | splitLeft | Number of split buttons to the left | Number | 3 | | splitMiddle | Number of split buttons in the middle | Number | 3 | | splitRight | Number of split buttons to the right | Number | 3 | | pageText | Text in front of page number for mode == 1 | String | "Page" | | itemText | Text in front of item range for mode == 2 | String | "Item" | | gotoText | Text on the "goto" button, ignored if gotoIcon is set | String | "Go" | | prevText | Text on the "previous" button, ignored if prevIcon is set | String | "‹" | | nextText | Text on the "next" button, ignored if nextIcon is set | String | "›" | | firstText | Text on the "first" button, ignored if firstIcon is set | String | "«" | | lastText | Text on the "last" button, ignored if lastIcon is set | String | "»" | | gotoIcon | Font Awesome icon on the "goto" button instead of gotoText | String | null | | prevIcon | Font Awesome icon on the "previous" button instead of prevText | String | null | | nextIcon | Font Awesome icon on the "next" button instead of nextText | String | null | | firstIcon | Font Awesome icon on the "first" button instead of firstText | String | null | | lastIcon | Font Awesome icon on the "last" button instead of lastText | String | null | | hideGoto | Whether to hide the "goto" button/input field | Boolean | false | | hidePrev | Whether to hide the "previous" button | Boolean | false | | hideNext | Whether to hide the "next" button | Boolean | false | | hideFirst | Whether to hide the "first" button | Boolean | true | | hideLast | Whether to hide the "last" button | Boolean | true | | onClick | User defined event handler for button click | Function | undefined |

Public methods

Constructor

Initialize options and properties and redraw the paginator.

// Initialize the plugin with default values
var pager = $("#mydiv").anyPaginator();

// Initialize the plugin with 10 items per page, 2 buttons on the left and right side and a Font Awesome icon for the ellipsis:
var pager = $("#mydiv").anyPaginator({ 
                          itemsPerPage: 10,
                          splitLeft:    2,
                          splitRight:   2,
                          ellipsisIcon: "fa-thin fa-ellipsis-stroke",
                        });

reset(options)

Reset options and properties and redraw the paginator.

// Reset the plugin to mode 1
pager = pager.reset({mode:1});

currentPage()

Get the page that is currently highlighted or set highlight to a given page.

// Get
var curr_page = pager.anyPaginator("currentPage");
var curr_page = pager.currentPage();
// Set
pager.anyPaginator("currentPage",17);
pager.currentPage(17);

By default, the setter method will not call the user supplied callback function. To do so, pass "true" after the page number: pager.currentPage(17,true); See refresh().

numPages()

Get or set the number of pages in the paginator.

// Get
var n_pages = pager.anyPaginator("numPages");
var n_pages = pager.numPages();
// Set
pager.anyPaginator("numPages",15);
pager.numPages(15);

By default, the setter method will not call the user supplied callback function. To do so, pass "true" after the number of pages: pager.numPages(15,true); See refresh().

numItems()

Get or set the number of items in the paginator.

// Get
var n_pages = pager.anyPaginator("numItems");
var n_pages = pager.numItems();
// Set
pager.anyPaginator("numItems",200);
pager.numItems(200);

By default, the setter method will not call the user supplied callback function. To do so, pass "true" after the number of items: pager.numItems(200,true); See refresh().

option()

option(option)

option(options)

option(option,val)

Get or set one or more options for the paginator. The paginator will be refreshed, but the user supplied callback function will not be called.

// Get
pager.anyPaginator("option"); // Get the options object
pager.option();               // Get the options object
pager.anyPaginator("option","pageText"); // Get the "pageText" option
pager.option("pageText");                // Get the "pageText" option
// Set
pager.anyPaginator("option",{splitLeft:2,splitRight:2}); // Set all options in the given object
pager.option({splitLeft:2,splitRight:2});                // Set all options in the given object
pager.anyPaginator("option","splitLeft",2);              // Set the "splitLeft" option
pager.option("splitLeft",2);                             // Set the "splitLeft" option

refresh()

refresh(callUserFunction)

Redraw all the page numbers, ellipsis and navigators. If callUserFunction == true and a user-supplied onClick handler is set in options, the handler will be called with the pager as parameter after refresh has completed.

pager.anyPaginator("refresh",true);
pager.refresh(true);

addPage()

Increase number of p

Anypaginator

Install / Use

README