jQuery Pagination Plugins

This popular article was updated in February, 2017, to reflect the current state of jQuery pagination plugins.

Presenting a long, unwieldy list of results is generally a poor approach to displaying your information. That's why pagination, especially with longer content, is important to get right.

Server-side pagination is generally used to fetch paged content, displaying a set of results separated into pages (often with a unique URL). While that works fine, client-side pagination is another solution. Let's have a look into some jQuery-based plugins that you can leverage to create paginated results.

TWBS jQuery Pagination

This plugin helps create simple, effective, and useful pagination for your site. All you need to do is specify an element (preferably a ul or div) and the plugin takes care of the rest. TWBS requires jQuery, the plugin itself, and optionally the Bootstrap CSS.

You might find this useful in situations where you already have the data ready and are just using the paginator to switch the content in view. You can hook into the onPageClick event and determine which page to load (or optionally run an Ajax call to pull results from your DB). Either way, this plugin is simple, easy to use, and provides several configuration options to suit your needs.

The plugin looks solid and has been maintained and updated across several revisions (now up to version 1.4.1). It's a good library that looks like it will be maintained and expanded on in the future.

• GitHub
• Website / Docs
• Codepen

JQuery BootPag

jQuery Bootpag lets you create a simple pagination control with minimal fuss. The plugin has several options, such as the ability to control the next/previous labels and various classes applied to the controller (such as on first, last and subsequent page elements)

To get up and running you'll need jQuery, Bootstrap JS, and this plugin's JS files. You'll also probably want the Bootstrap CSS file unless you plan to style it yourself. Once you have those in place you can listen to the page event which is triggered when navigating between pages.

The event handles the page being requested and the event itself. It's here you can pull in content or change the DOM. Another useful element is the href property that can be set. Setting this property lets you add an anchor link to the pages' URL (e.g href: "#result-page-") which adds the plugin's internal page number to URL. You can name this whatever you like, but it's useful for creating sets of data and maintaining state.

Where you might find this useful is instead of loading the first page by default, you could check to see if your URL contains a specific page and then initialize Bootpag to that page; loading page 7 of the results if someone navigated directly to there, for example.

The plugin hasn't been updated since mid-2015, and is currently on version 1.0.7. However, it works as you'd expect and provides enough options for you to customize it as you require.

Continue reading %jQuery Pagination Plugins%

by Simon Codrington via SitePoint