Use jQuery to Generate Quick Pagination

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

Live Demo
Download

Benefits of quick pagination

Can be used on any list in seconds
You can specify navigation on top, bottom or both
You can specify the number of items to display for each page
Very lightweight, only 3kb!
I’ve tested in on every browser and it is very stable

Disadvantages to similar pagination plugins

It currently only works on lists (but you can use it on divs you would have to put them in li tags).
It currently doesn’t have back and next buttons.

Example Usage 1

Default options 10 list items per page and page navigation at bottom.

    $("ul.pagination1").quickPagination();

Example Usage 2

Default options 10 list items per page and page navigation at top and bottom.

   $("ul.pagination2").quickPagination({pagerLocation:"both"});

Example Usage 3

Specified 3 list items per page and page navigation at top and bottom.

   $("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"});

Author: Sam Deering. Find out more about jQuery4u author on Google Plus.

9 Comments

Cruz3N

July 14, 2011 at 4:02 pm | Permalink

Thanks Bro, i really like your plugin about pagination… I want to use this in my project :D

Tanmay

July 14, 2011 at 9:57 pm | Permalink

Hi, nice work but i am not able use it… whenever i try to reference it i just keep getting object dosen’t support the property error in my IE … :(

- jquery4u
  
  July 14, 2011 at 10:37 pm | Permalink
  
  @Cruz3N – Thanks!
  
  @Tanmay – I’ve tested it in IE and didn’t see any errors. Can I ask what version of IE it was? Also exactly what the error msg said? Is it working ok in Firefox?
  
  http://jquery4u.com/demos/jquery-quick-pagination/
  
Tanmay

July 14, 2011 at 11:22 pm | Permalink

Finally got it working, there was some reference issue. :)

A little help … can you tell me how I can use the plugin to show a previous and next button and not the page numbers? How can I implement that?

Magesh

September 14, 2011 at 9:27 pm | Permalink

I added this plugin and it works great. But when I add search on the list, the search is not work. when I comment the quickPagination the search works properly. I enable the search on the list using data-filter attribute as follows.

Please help me in resolving this issue.

Magesh

September 14, 2011 at 9:28 pm | Permalink

<ul class=”newsList” data-role=”listview” data-filter=”true” >

- jquery4u
  
  September 15, 2011 at 8:24 am | Permalink
  
  Hi Magesh,
  
  It’s hard to understand what’s the problem. Have you got the url of the page your trying to include the pagination on? I can have a look at it for you.
  
  Thanks
  Sam
  
Mostafa Shalkami

March 20, 2012 at 12:15 am | Permalink

It currently only works on lists (but you can use it on divs you would have to put them in li tags).
well, I have used it on div’s and it is working fine ….

VijayC

April 15, 2012 at 3:48 am | Permalink

Can we substitute the pagination numbers with a simple “next”, “previous” or kind of navigation ?