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 […]

jPaginate

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 the plugin with the following properties:

  1. count: The total number of pages
  2. start: With which number the visible pages should start
  3. display: How many page numbers should be visible
  4. border: If there should be a border (true/false)
  5. border_color: Color of the border
  6. text_color: Color of the text/numbers
  7. background_color: Background color
  8. border_hover_color: Border color when hovering
  9. text_hover_color: Text color when hovering
  10. background_hover_color: Background color when hovering
  11. images: If the arrows should be images or not (true/false)
  12. mouse: With value “press” the user can keep the mouse button pressed and the page numbers will keep on sliding. With value “slide” the page numbers will slide once with each click.
  13. onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Message from TestkingLearn the basics of jquery using sun tutorials. Download SY0-201 dumps to learn how to create jQuery plugins and pass your ccnp exams on first attempt.

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 121

Comments are closed.
  1. @TED S it’s possible to recreate the pagination on the same HTML element if the number of pages change, i did that already. I check if the new “count” from AJAX is different than the one used to create the pagination and if so, i recreate it the same way i created it but with the new values coming from AJAX.

    @Cody thanks for the great piece of code here. I made modifications to your script to add 4 new options :
    page_choice_display : false,
    item_count_display : true,
    item_count : 10,
    item_count_total : 0
    This adds 2 things :
    – a way to manually set the page # you want to access
    – a way to manually specify the number of items you want to display by page (and optionally displaying the total number of items). Usefull for AJAX calls.

    I also integrated Aleksandar’s modifications so a click on First or Last or on the actual selected page won’t do any action.

    I couldn’t find a way to reach you on the website so i don’t know how to give you the code i made. Would you use something like Github ?

    Anyway i modified the demos to show what i added here : http://jeremy.huet.free.fr/jPaginate/jPaginate.html

    Thanks.

  2. The position of page links is fixed as a result of which the content overlaps the page links if the content height exceeds the original height of the content div.
    Please advise on how to make the position of the page links dynamic and relative to the position of content bottom.

  3. Sorry, the above comment is incorrectly given.
    Actual query is that I want to link the pagination and the content displayed to the database using ASP/ VBScript.
    Please advise.

  4. just want to ask it’s that possible to add any images inside the pagination box
    thx 🙂

  5. I really need help! I need to finish a project and this pagination is perfect for it, but I need to know what to put in OnChange in order to call a simple html page. Pleaseeee help!

  6. Jérémy,
    I´m using your fork.

    This line need change for translation facility.

    .append($(”).addClass(‘jPag-pageChoice-label’).html(‘Page #’))

  7. I was searching jquery pagination for almost a month to use in my project but couldn’t get one as per my linking so i had to use one built in the framework. Now i think i will be using this in every project. You solved my one problem at least. Thanks a lot!!!

  8. Hey guys!

    I noticed no one had posted a fix for the page numbers not showing in 3 or less pages in IE.

    Well I figured it out!!!

    Line 106. Change the line to:

    if(bName == ‘Microsoft Internet Explorer’){

    This worked for me!!!

  9. Hi is there any way to show the same pagination both at top and bottom of the page…

  10. How can I enable transitions to the content that is being loaded with every page click? Lets say, as the first page moves out, the second page slides in. Would be good to have the transitions enabled for this plugin.

  11. Where is Cody??
    People still want to know how to get 2 instances working on one page that update together.
    Can someone, anyone please post an in depth description of how to do this. I’ve seen a few posts of people solving this put they never post the full answer.
    Please help!
    Thanks

  12. Is it possible to know which elements are being displayed? (Not looking for the selected element)