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.


Example Usage 2

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


Example Usage 3

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

Tags: jQuery Convert List Items into Pages with Navigation
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.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

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


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

    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


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

  • 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


    How I can change pages 5 to 5?

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


  • Danish


    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


    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 :)


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

    Many, MANY thanks! It works perfect.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.