45+ Free CSS3 jQuery Pagination Plugins

By

December 29, 2013CSS3 jQueryNo comments

This list an useful free css3 ready jquery pagination page navigation plugins for your designs.

All we know, that when we facing with necessarity to display large amount of data – we starting thinking about adding pagination.
So we split all our content to several pages.
And in this case – each page contain some part of our information.
As usual this is server side pagination, where we extracting necessary amount data from database for each page.
But commonly, in case of small (or middle) data sets – we don`t need such pagination.
And we can just use user-side pagination using javascript to manage with our pages.
Today I will show you how to create such pagination.
Here, we are presenting a collection of some useful and free to use jQuery pagination plugins for you that you can integrate on your website in order to split pages and posts into several pages.

jQuery Animated Pagination (Premium)

Animated Pagination is a jQuery plugin for auto pagination with animation effects like crossfade, slide etc. No server side programming is needed.

MORE / INFO DEMO

Pure Css3 Animated Pagination

Simple and cool configuration, simple color scheme change.

MORE / INFO DEMO

Usable Long-list Pagination

An experiment for making navigating long lists a bit more usable with Lexicon-style pagination on hover/focus. Needs to work on Mobile too.

MORE / INFO DEMO

Pagination CSS

This isn’t done yet, but I don’t think there’s any way to make it private?

MORE / INFO DEMO

Pagination

Responsive, Accessible, Alternate Pagination experiment.

MORE / INFO DEMO

Dark Pagination

A dark pagination complete with hover and active states.

MORE / INFO DEMO

Diamond Spin Pagination

Using CSS transitions, trying to accomplish a slide pagination of diamonds that spin when active. There is a big of weird glitch where it shifts a bit. Still trying to resolve that.

MORE / INFO DEMO

 

CreativeTable

CreativeTable it’s a php class that builds a table based on the data retrieved by an SQL query or an 2D Array. It has lots of options and it’s very, very configurable.

It’s perfect to incorporate with your backoffices, because it’s very flexible and very easy to build. You can also easily integrate with your sites.

MORE / INFO DEMO

jQuery Simple Content Sorting Plus Plugin

This plugin creates a simple content sorter for your content and allows you to control your content with pagination! Simple Content Sorting provides a clean and easy way to beautify your interface by providing a slick client side sorting mechanism. You heard correctly, no page loading happens as the sorting takes place since its all done with javascript.

MORE / INFO DEMO

Theia Post Slider for WordPress

Theia Post Slider for WordPress transforms your posts with multiple pages into slideshows, making your posts much more engaging and easier to browse. It works out-of-the-box without the need to edit your existing posts and it is compatible with virtually any WordPress theme. It has a user-friendly admin page where you can choose from over 25 slider themes and customize other settings.

MORE / INFO DEMO

CSS3 Pagination

Works as intended in most Mac browsers, and degrades gracefully, though it would appear Firefox doesn’t yet support doubled up box-shadows (inner and outer).
PS this is my first Codepen, so sorry if I’ve missed any conventions!

MORE / INFO

CreativePager

CreativePager its a php class that builds almost any pagination system that you see over the internet. It has a lots of options and its very, very configurable. The configuration its so easy that you will be able to configure a pager in less than 30 seconds.

MORE / INFO DEMO

PHP Simple PageNav

With this PageNav CLass is no longer trouble, you can easily create a simple paging functions, and styles can be modified easily to arbitrarily change the site into a consistent style, support for MySQL, PostgreSQL … and other databases, as long as they support PHP ‘s In principle, the database can be compatible.

MORE / INFO DEMO

jQuery jPList Plugin

jPList is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure (DIVs, UL/LI, tables, etc).

MORE / INFO DEMO

Fancy Pagination

MORE / INFO

Next Post Fly Box For WordPress

Next Post Fly Box For WordPress is a WordPress plugin that creates navigation between next and previous post as a floating pop-up box on the left or right side of the window. When the user scroll the page a fly box is showing, allowing the user to select next or previous post based on conditions set in the plugin options panel.

MORE / INFO DEMO

PageAnimate Web-Page Slider

This jQuery plugin is a full page slider for navigating between web pages. For example, you could have your home page on one slide, contact page on another, and so on. It is responsive and works in all major browsers, including Internet Explorer 6 ( :o ) and mobile browsers.

MORE / INFO DEMO

Bootstrap Paginator v 0.6

Bootstrap Paginator is a jQuery plugin that simplifies the rendering of Bootstrap Pagination component. It provides methods to automates the update of the pagination status and also some events to notify the status changes within the component.Bootstrap Paginator is able to run on the following browsers: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+.

MORE / INFO DEMO

Pagination Buttons

Pagination buttons with pointed arrow tips for the previous and next button.

MORE / INFO

jPages

jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.

Apart from all its features, the main diference for the other pagination plugins is that with jPages you can create as many navigation panels as you want and you can choose exactly where to place them.

The plugin is very unobtrusive and it won’t apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).

MORE / INFO DEMO

3D Pagination

MORE / INFO

 

AJAX Pagination using jQuery and PHP with Animation

I have created an Ajax JQuery based pagination few months before which my users liked very much and there are thousands of downloads of that tutorial. So, I thought to create on another tutorial for pagination with some jquery effects to make stylish and attractive. Its animated loading of records using jquery animation. I hope you will like it very much as it looks nice.

MORE / INFO DEMO

Pagination with jQuery, MySQL and PHP.

I received lot of requests from my readers that asked to me how to implement Pagination with jQuery, PHP and MySQL. so I had developed a simple tutorial. It’s looks big but very simple script.

MORE / INFO DEMO

Clean Pagination

Simple pagination using css.

MORE / INFO

jQuery Pagination revised

There are many nasty pagination implementations and certainly sooner or later I’ve also written such a cruelty. That’s why I’ve been working on a generalized solution for long in order to combine the variety of needs that are imposed on such a navigation to finally put an end to blocks of code that are copied from one project to another with the consequence that it gets no longer understood over the time.

The result of these efforts is my third jQuery plugin that has another big advantage over server side pagination; by generating the links virtually on the client, the risk of duplicate content drops and the need of ugly follow, noindex link attributes left unnecessary. The pagination plugin also combines a varity of features. It can be used to divide long lists or areas of content into multiple seperate pages, load paged content with pre-calculated database offset-parameters via Ajax and anything with full control to adapt the style properly to your site-layout. Of course, creating simple links with no event triggering is possible as well. The plugin also offers the facility to “overlap” pages, which means you can show elements of previous pages on the subsequent sites in order to allow a straightforward flow of reading. A gloss for all performance enthusiasts: The library is just 1.5kb as minified and gzipped bundle!

MORE / INFO DEMO

jPaginate – jQuery Pagination System Plugin

We noticed that our original post “Making a jQuery pagination system”received a lot of attention and a couple of people pointed towards some new features and making it into a plugin so we spent the past few days rewriting the code from scratch with some major improvements.

MORE / INFO DEMO

Easy pagination with jQuery and Ajax

In this tutorial I would like to go over an easy way to display your database data with jQuery using Ajax and pagination.

MORE / INFO DEMO

 

jQuery Pagination Plugin: Smart Paginator

Smart Paginator is a comprehensive jQuery Pagination plugin that makes adding pagination very simple task, all the navigation logic is built in and it is also very customizable. Smart Paginator jQuery Pagination plugin can also filter your data automatically on client side. Click the screen shot below for the demonstration to see the various filter options provided by Smart Paginator. Smart Paginator supports variety of parameters and custom themes, that can be used to customize the look and feel to your desire.

MORE / INFO DEMO

jPaginator

jPaginator is a jQuery plugin for pagination. It’s fun, intuitive, it comes with a slider and you can ask for an unlimited number of pages. Use it with a unique element, for more details please have a look at the code of demo1 and the plugin’s options. Don’t forget the CSS page “jPaginator.css”. Dependencies : jQuery 1.3.2+, jQuery UI Slider

MORE / INFO DEMO

jQuery Pagination Plugin

When you have a a large list of items (e.g. search results or news articles), you can display them grouped in pages and present navigational elements to move from one page to another. This plugin creates these navigational elements.

MORE / INFO DEMO

Jquery-Php AJAX Pagination(Ajax paginator)

Jquery-Php Ajax Pagination is used to create Ajax Based Pagination for your website.It is better to have Ajax Pagination on Your Webpage as Ajax Pagination will load only the specific part rather than whole page.So it will speed up your website.So we are implementing this Ajax paginator with the help of Jquery .So You need to know Jquery ,Jquery is lot easier than javascript ,so its not big deal ,if you dont know it.you just need to follow the instructions to implement this Jquery-Php Ajax Pagination.

MORE / INFO DEMO

Smart Pagination – WordPress plugin

Add custom pagination to your website in just a couple of minutes!

MORE / INFO DEMO

Sweet Pages: A jQuery Pagination Solution

Paginating content is a standard choice when dealing with large chunks of data. The implementation usually involves passing the page number to the back-end, where the appropriate data is fetched from the database and returned in some form. A cumbersome process, but it is a necessary evil. Or is it?

When dealing with small data sets, wouldn’t it be better to have the content readily available, but still neatly organized and easy to access?

Today we are making a jQuery plugin that will enable you to convert a regular unordered list of items into a SEO friendly set of easily navigatable pages. It can be used for comment threads, slideshows, or any kind of structured content.

MORE / INFO DEMO

 

jqPagination

jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive ‘Page 1 of 5′ input that, when selected, allows the user to enter their desired page number. The plugin will ensure that only valid pages can be selected, a valid request will result in the paged callback. First, previous, next and last buttons work out of the box, but are optional.

MORE / INFO DEMO

Easy Paginate jQuery plugin for pagination

This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects. It’s main purpose is to view certain number of list items at once, but it can also be set up to view one item by one.

MORE / INFO DEMO

simplePagination.js

A simple jQuery pagination plugin, 3 CSS themes and Bootstrap support.

MORE / INFO DEMO

Pajinate – A jQuery Pagination Plugin

Pajinate is a simple and flexible jQuery plugin that allows you to divide long lists or areas of content into multiple separate pages. Not only is it a simpler alternative to server-side implementations, the time between paginated-page loads is almost nil (up to a reasonable page-size of course).

MORE / INFO DEMO

Use jQuery to Generate Quick Pagination

Use Quick jQuery Pagination to convert long lists and page content into numbered pages in seconds!

MORE / INFO DEMO

jPaginate: A Fancy jQuery Pagination Plugin

jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well. You can call the plugin in the following way: $(elementID).paginate() You can configure […]

MORE / INFO DEMO

Extreme Makeover: jPaginator CSS3 Edition

jPaginator is a nifty jQuery plugin by Remy Elazare which combines pagination and scrolling in a simple user interface. Remy recently asked me if I would like to use it for something on Webdesigntuts+ and I figured it would be a great candidate for a style make-over.

MORE / INFO DEMO

Simple Pagination + Transition

MORE / INFO

Leave a Reply