JavaScript
Article

Use jQuery to Generate Quick Pagination

By Sam Deering

jquery-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"});
Sam Deering
Meet the author
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
  • http://cruzenaldo.com Cruz3N

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

    • rajesh

      Hi, how to use this plug in eclipse. I am new to Java . So please help. I have a JSP page displaying data from mysql table. I need it should show in pages.

  • 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 … :(

  • 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 ?

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

  • Gassh

    Hi, what is the license, I can use this plugin for commercial projects.

  • Pingback: jQuery Pagination Plugins ល្អបំផុត​ចំនួន២១ ដែល​អាចទាញយក​បានសំបុកអាយធី()

  • Pingback: 45+ Amazing Free CSS3 jQuery Pagination Plugins | Designrazzi()

  • Pingback: 20 Great Free jQuery Pagination Plugins and Tutorials - Streetsmash()

  • http://softn.co/ Marulo

    Hello

    How I can change pages 5 to 5?

    That is, I do not show all 25 pages, only 5 in 5.

    thanks

  • Danish

    Hello,

    i have a doubt , can i use this pagination js in mobile jquery.

  • cozza

    omg I think I love you hahaha. worked like a charm! at first I was like “why is this not working? then I realised I was linking to the wrong directories woops. thanks a bunch!

    • cozza

      ah forgot to ask – any way that once another page is clicked from the bottom that it’ll go to the top?

  • Digitalports

    Love It! , simple, lightweight, easy to implement!!!

  • Pingback: 45+ Free CSS3 jQuery Pagination Plugins()

  • Kah Ching

    Hi,

    I would like that if you have the full list of the API parameters?
    Actually I am looking to change the navigation bar to bottom right, not sure if you have readily made function for it.
    And full API parameters shall helps everyone to utilize it better :)

    Thanks.

  • http://www.nope.no Paweł

    Many, MANY thanks! It works perfect.

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!