Use jQuery to Generate Quick Pagination

Posted by Sam Deering
in Jquery Data Handling, Jquery DOM Mods, Jquery Tutorials, Jquery User Interfaces, Plugins

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

Tagged with: jQuery Convert List Items into Pages with Navigation.

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

http://cruzenaldo.com Cruz3N

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

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
  
  @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

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

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

<ul class=”newsList” data-role=”listview” data-filter=”true” >
- jquery4u
  
  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
Pingback: 10 jQuery Pagination Plugins | jQuery4u
Pingback: Paginação em listas HTML com jQuery Quick Pagination | kadunew.com/blog
Pingback: Paginação em listas HTML com jQuery Quick Pagination | SWX Softwares - Desenvolvimento e Design Web
Mostafa Shalkami

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 ….
Pingback: jQuery Quick Pagination, paginador de listas ultra liviano y simple
VijayC

Can we substitute the pagination numbers with a simple “next”, “previous” or kind of navigation ?
- jquery4u
  
  Hi VijayC,
  Yes this is possible, however this version of the plugin doesn’t support it very well. There are other plugins options which will allow this, see: http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/
  Sam
wiyono

Really nice…
Thanks…

One question.please…. hehehee…

Is imposible to make hashchange?
I try to make with jquery hashchange but didn’t work…..

Can you help me?

Thank you.
- http://jquery4u.com/ jQuery4u
  
  Hi Wiyono, sorry if i’ve missed something but what do you mean by hashchange?
Rakeh

very very thanks its really helped me
Flash Buddy

Great tool, really helped me out, thanks!
Christian

Wow!!! this is a really simple and great tool, but how I can show the “simplePagerNav” only on the top? without repeat at the bottom.
- http://jquery4u.com/ jQuery4u
  
  Try
  $(“ul.pagination3″).quickPagination({pagerLocation:”top”,pageSize:”3″});
Pingback: Web Arazi Php ,Mysql,Sql ve Meraklının Yeri =) » 20 JQuery Sayfalama (Pagination) Eklentisi
ttls

Thanks for the help my browser freezes on Windows 8 with the other plugins … Thanks for the tutorials =)
Bimal

Hi, I tried to update the page size dynamically using jQuery however it did not go so well. Is there a solution for this ?
Pingback: Use jQuery to Generate Quick Pagination | jQuery | Important Links
Pingback: 20+ Useful jQuery Pagination Plugins and Tutorials | good favorite
Zet Coby

Thank You ! , its perfect for what i need ^^
but i have a question, lets say that there will be like over 5k will it still work that smooth? or then i have to do a pagination that uses php or ajax?
pers

Hello and thanks for sharing this nice plugin!

Is there a way to show the list horizontally instead of vertically? something like float:left in css?
monkii

Hi Nice work :D Is it possible to name the container for the page links? say I want to style the container and add more items in it.
http://www.facebook.com/justepri Epri Yanto

Hi, Nice work. But, Is it possible to do the Auto Move to the next page? something like auto slider. Thanks
Pingback: 21 Best jQuery Pagination Plugins
Pingback: 21 个最佳的 jQuery 翻页插件
Pingback: 21 个最佳的 jQuery 翻页插件 | WE
khem chand

Hi.. this is a very nice plugin.

In this plugin how can we filter data according class. I means that how can we ignored contains specific class.
Vinicius Abreu

Hi Sam!

Thanks for your job, really simple and functional solution.

Greetings from Brazil,
Vinicius
Pingback: 20+ Useful jQuery Pagination Plugins - Get More Clicks! | NowThemeNowTheme
Pingback: Design Magazine | Inspirational Resources For Web Designers & Developers

Use jQuery to Generate Quick Pagination

Benefits of quick pagination

Disadvantages to similar pagination plugins

Example Usage 1

Example Usage 2

Example Usage 3

Enjoyed this post? Share and Leave a comment below, thanks! :)

About the Author

Get jQuery Stuff in your inbox!