An easy to use, yet advanced and fully customizable javascript/jQuery paginator plugin

Overview

anyPaginator CodeQL

An easy to use, yet advanced and fully customizable Javascript/jQuery paginator plugin. anyPaginator is a spinoff of the anyList project and we think it's the best Javascript paginator out there.




Take a look at the jsFiddle demos:

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 dynamically at any time.

The user provides a callback function to redraw data whenever a button is pressed, anyPaginator takes care of the rest.

Download

Usage

  1. Include the anyPaginator Javascript and CSS files:
">
<script src="/path/to/anyPaginator.js">script>
<link  href="/path/to/anyPaginator.css" rel="stylesheet"/>
  1. Provide a place for the paginator and its' associated data to live:
">
<div id="mypager">div>
<div id="mydata">div>
  1. Initialize the paginator and add some pages:
let pager = $("#mypager").anyPaginator({ onClick: function() { refreshData(pager); } });
pager.numItems(200);
  1. Display some data initially:
refreshData(pager);
  1. Have the onClick calback function redraw the data according to the page number selected:
Hello row "+i+"

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

Hello row "+i+"

"
); }

API

Options

Option Description Type Default
mode 0: buttons, 1: page number, 2: item range. Number 0
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
itemText Text in front of item range for mode == 1 String "Item"
pageText Text in front of page number for mode == 2 String "Page"
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 Bool false
hidePrev Whether to hide the "previous" button Bool false
hideNext Whether to hide the "next" button Bool false
hideFirst Whether to hide the "first" button Bool true
hideLast Whether to hide the "last" button Bool 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);

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

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

option()

option(option)

option(options)

option(option,val)

Get or set one or more options for the paginator.

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

Redraw all the page numbers, ellipsis and navigators. If a user-supplied onClick handler is set in options, it will be called with the specified arguments in an array after refresh has completed.

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

addPage()

Increase number of pages by 1 and display a new page number button. Note that instead of using "addPage" you may add items with "addItem" or simply by setting the "numPages" or "numItems" option, in which case page numbers will be added automatically as needed. Setting "numItems" is the recommended way.

If pages are added with "addPage" and you need to change "itemsPerPage" at a later time, "numItems(n)" must be called before setting "itemsPerPage" in order for the correct number of pages to be calculated.

pager.anyPaginator("page");
pager.addPage();

removePage()

Decrease number of pages by 1 and remove a page number button.

pager.anyPaginator("page","remove");
pager.removePage();

addItem()

Increase number of items by 1, recalculate number of pages and display a new page number button if neccessary. Note that instead of using "addItem" you may add pages with "addPage" or simply by setting the "numPages" or "numItems" option, in which case page numbers will be added automatically as needed. Setting "numItems" is the recommended way.

If items are added with "addItem" you should call either "refresh" or "numItems(n)" or set "itemsPerPage" after all items are added in order for the paginator to be displayed with correct values.

pager.anyPaginator("item");
pager.addItem();

removeItem()

Decrease number of items by 1, recalculate number of pages and remove a page number button if neccessary.

pager.anyPaginator("item","remove");
pager.removeItem();

showPage(pageNo)

Set focus to the page pageNo.

pager.anyPaginator("show",12);
pager.showPage(12);

buttonClicked(event)

Update the paginator when a button is clicked. Normally not neccessary to call this method. If a user defined onClick method is set in options, it will be called after buttonClicked has finished.

gotoClicked(event)

Update the paginator when the go button is clicked or enter is pressed in the input field. Normally not neccessary to call this method. If a user defined onClick method is set in options, it will be called after gotoClicked has finished.

Improvements

Got an idea for improving anyPaginator? A cool new feature you'd like to see? Think you've found a bug? Contact us at [email protected]! We love pull requests! ;)

License

AGPLv3.0 for open source use or anyPaginator Commercial License for commercial use.

Get licences here: http://balanse.info/anypaginator/license/ (coming soon).

Contact

Feature requests, ideas, bug reports: [email protected]

License and other commercial inquiries: [email protected]


See also the anyList project: https://github.com/arnemorken/anylist

You might also like...

a responsive equal heights plugin

a responsive equal heights plugin

jquery.matchHeight.js matchHeight makes the height of all selected elements exactly equal brm.io/jquery-match-height Demo - Features - Gallery - Insta

Jan 5, 2023

BetterDiscord plugin to see what your friends are playing across platforms, all on Discord

BetterDiscord plugin to see what your friends are playing across platforms, all on Discord

CrossPlatformPlaying A plugin that brings Rich Presence to games that don't support it, and lets you see what your friends are playing even if they tu

Dec 12, 2022

yt-dlp extractor plugin for DisTube.js.org.

yt-dlp extractor plugin for DisTube.js.org.

yt-dlp extractor plugin for DisTube.js.org.

Jul 17, 2022

A feature rich message noting plugin for Cumcord

A feature rich message noting plugin for Cumcord

Sperm Bank A feature rich message noting plugin for Cumcord. Features The ability to add messages to a virtual "account" The ability to make multiple

Nov 30, 2022

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures This repository contains JavaScript based examples of many popular algorithms and data structures. Each algo

Dec 31, 2022

JavaScript Survey and Form Library

JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library. SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQue

Jan 1, 2023

Extensive math expression evaluator library for JavaScript and Node.js

Extensive math expression evaluator library for JavaScript and Node.js

🏠 Homepage Fcaljs is an extensive math expression evaluator library for JavaScript and Node.js. Using fcal, you can perform basic arithmetic, percent

Dec 19, 2022

An arbitrary size Bit-Vector implementation in JavaScript

An arbitrary size Bit-Vector implementation in JavaScript

BitSet.js BitSet.js is an infinite Bit-Array (aka bit vector, bit string, bit set) implementation in JavaScript. That means that if you invert a bit v

Dec 9, 2022

SPOILER ALERT! A happy little bit of javascript to hide spoilers on your site.

SPOILER ALERT! Don't spoil it! Hide copy and images with a bit of SVG blur. Taste on mouseover. Eat on click. Do you publish spoilers? Do you wish you

Sep 27, 2022
Releases(1.0.2)
  • 1.0.2(Feb 7, 2022)

    Public release 1.0.2.

    LICENCE INFO: AGPLv3.0 for open source use or anyPaginator Commercial Licence for commercial use. Get commercial licences here: https://anypaginator.balanse.info/licence/

    Full Changelog: https://github.com/arnemorken/anypaginator/compare/1.0.2-beta...1.0.2

    Source code(tar.gz)
    Source code(zip)
  • 1.0.2-beta(Jan 26, 2022)

  • v1.0.1-beta(Jan 20, 2022)

  • v1.0.0-beta(Jan 20, 2022)

Owner
Arne Morken
Master of Computer Science, University Of Bergen, Norway, 1993.
Arne Morken
A standard, fully working MDT for QBCore

qb-mdt A standard, fully working MDT for QBCore Description This is a fully working MDT for QBCore. This works for both Law Enforcement + EMS/ambulanc

Midsetts 23 Dec 24, 2022
BotsApp is an optimized and easy-to-use WhatsApp UserBot written in Node.js

?? BotsApp ?? Your Personal Assisstant, on WhatsApp! BotsApp is an optimized and easy-to-use WhatsApp UserBot written in Node.js. Utilize your persona

BotsApp 5.5k Jan 1, 2023
DisOwen project - Makes it easy and fun to use Discord

DisOwen project - Makes it easy and fun to use Discord. Also first userbot for Discord

Ber4tbey 7 Aug 4, 2022
A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.

Readmore.js V3 alpha I am deprecating the 2.x version of Readmore.js. A new version is coming soon! Check it out and help me test it! Readmore.js A sm

Jed Foster 1.5k Nov 30, 2022
⚡️ A resource to help figure out what JavaScript array method would be best to use at any given time

JavaScript Array Explorer When I was first learning array methods, I spent a lot of time digging through the docs to find the appropriate one, and I h

Sarah Drasner 2.6k Jan 2, 2023
Pretty UI to make getting details about PS1 stations easy.

ps1data Pretty interface to navigate through PS1 stations at BITS Pilani Disclaimer Given that I had to do this whole thing in about 18 hours, this ha

BITS-ACM 39 Jun 25, 2022
TypeScript with a Borrow Checker. Multi-threaded, Tiny binaries. No GC. Easy to write.

TypeScript with a Borrow Checker. Multi-threaded, Tiny binaries. No GC. Easy to write.

David Alsh 1.4k Dec 19, 2022
A jump-start for jQuery plugins development

jQuery Boilerplate A jump-start for jQuery plugins development So, you've tried your hand at writing jQuery plugins and you're comfortable putting tog

jQuery Boilerplate 2.5k Dec 20, 2022
Use an HFS 2 'template' in HFS 3 - PRE-ALPHA stage

Tradit-TPL Use an HFS 2 'template' in HFS 3 - PRE-ALPHA stage Features Speed! Always response within 10ms then stream the page (without file sorting,

NaitLee 3 Jun 8, 2022
Gmail-like client-side drafts and bit more. Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters.

Sisyphus Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters. Descriptio

Alexander Kaupanin 2k Dec 8, 2022