jQuery Pagination Plugin: Smart Paginator

You may also like...

131 Responses

  1. Anton says:

    Hello,
    How to insert this pagination in Joomla 2.5 site?

  2. Eric says:

    Perfect solution which a great plugin… Thanks!

    It currently 1-10 of 38, say. Is there a way to change that to Page 1 of 4?

  3. I am truly grateful to the holder of this site
    who has shared this enormous article at at this time.

  4. David says:

    Hi.

    SmartPaginator works great for me but I’m trying to center div into a container like this, but no way;

    Any suggestion??

    Thanks

  5. mc says:

    is it possible to has dynamic “totalrecords”? i need to define the total records based on my records count.

  6. mihir says:

    Hello,

    tried setting display:’double’, but still it won’t show GO button and the textbox(to set no of records per page). Here is the code that calls smartpaginator function:

    $(‘#black’).smartpaginator({totalrecords: ” + productcount + “, recordsperpage: 6, datacontainer: ‘ctl00_cphMain_MerchItemRepeater1_divs’, dataelement: ‘div’, initval:” + initialpagestring + “, next: ‘ ‘, prev: ‘ ‘, first: ”, last: ”, theme: ‘black’, display:’double’, controlsalways: false });”

    Can someone please help!

    Thanks!

  7. mihir says:

    Hello,

    Can someone please suggest how to make Go button and the textbox (to specify number of records per page) visible ? both of them do not appear currently in my case.

    Thank you!

    • You need to set the value of “display” parameter to “double”

      • mihir says:

        I tried setting display:’double’, but still it won’t show GO button and the textbox(to set no of records per page). Here is the code that calls smartpaginator function:

        $(‘#black’).smartpaginator({totalrecords: ” + productcount + “, recordsperpage: 6, datacontainer: ‘ctl00_cphMain_MerchItemRepeater1_divs’, dataelement: ‘div’, initval:” + initialpagestring + “, next: ‘ ‘, prev: ‘ ‘, first: ”, last: ”, theme: ‘black’, display:’double’, controlsalways: false });”

        Please help!

  8. Julius says:

    Uhmm Hello! First of all this plugin is awesome. Its just that I’m having trouble displaying the page buttons properly when I refresh the page the buttons goes on top of each other

    ex:
    1
    2
    3
    4

    when I look at it on firebug the ul element inside the page div seemsto have a fixed width of 32 pixel styled on it… i cant override the styling cause it was generated by the plugin…

    can someone help me fix this? It would be much appreciated…Thanks in advance

    • Of course you can override any style generated by the plugin. e.g.
      [your selector]
      {
      width:48px!important;
      }

      • Julius says:

        Yeah but for some reason nothing seems to be happening I’ve tried overriding the width like this

        #selector ul{
        width: 100px;
        }

        but it doesn’t work by the way I’m using unordered lists and list items . I wonder whats wrong. Thanks for the quick response…

      • Julius says:

        Fixed it! thanks to your suggestion of putting “!important” on the width property…thanks again for your help :)

  9. mihir says:

    Can someone please suggest how to make Go button and the textbox (to specify number of records per page) visible ? both of them do not appear currently in my case.

    Thank you!

  10. mihir says:

    Hi

    Thanks for the great plugin. Can someone please suggest how to i dd extra test ‘Display ‘ + textbox (where user will enter no of items to display per page) + ‘ of’ + total items..

    basically, i want to display it like “dispaly 20 of 50 records 1 2 3 4 5 6″

  11. rahul kumar says:

    Thanks for this Awesome Plugin.

  12. Naresh says:

    How to change only the recordsperpage on an btn click event..

    i am reinitialing it like this

    $(‘.smart-paginator’).smartpaginator({ totalrecords: totalrecordscount, recordsperpage: newPageSizevalue, onchange: onChange });

    but i dont want like this, with this the pager again showing as 1st page..instead of current page

    • Yes, doing it right. The only thing you need to add is “initval” parameter and assign it the current page no. e.g
      $(‘.smart-paginator’).smartpaginator({ totalrecords: totalrecordscount, recordsperpage: newPageSizevalue, onchange: onChange,initVal:currentPage });

  13. paolasalas says:

    Hi.. im just wondering what licensing does this smart pagination plugin have? I am currently looking for pagination plugin to be used on our company application and i just want to be sure that this is not opensource and does not have the MIT or GPL licensing. Thanks. :)

  14. Gleb says:

    hello guys, can someone tell me please how to remove the right “Go” button and the input field?

  15. Ruud Aalders says:

    Hi Muhammad,

    Forget my previous question!
    Problem solved :)
    I had to use the onchange callback :)

    Again a very very nice plugin, simple yet very effective!

    Regards,

    Ruud Aalders

  16. Makarand says:

    Excellent work…very useful plug in thanks !!

  17. Ahmed says:

    Great pagination

    but I have problem with green one, how i can make initial page nmber inline (horizontal) because when i start the page it shows as vertical, but when i select the second page it works fine!!

    like
    1
    2
    3
    instead of 1 2 3

  18. Antoniu says:

    Muhammad

    Nice work, thank you.

    On my page the next, first buttons do not have height as the other page numbers the containing box appears smaller

    Thanks

  19. Antoniu says:

    Hi

    Would it be possible to have the page numbers aligned to the left instead of to the right side?

    Thank you

  20. Akrouj says:

    there is an issue with Chrome (16.0.912.77 m)
    the last page button is displayed bellow the other buttons.

    ex. 1 2 3
    4

  21. I’ve recently updated the theme and also moved to new host, you might have accessed during transition period. Everything is fixed now. Thanks for visiting egrappler.com

  22. Simon says:

    Why I can’t download or view a demo of Smart Paginator?

  23. Junaid says:

    Hi, I was trying to get the table pagination to work. I was able to get the pagination to work on the table however the header does not stay on each page for me. did you do something in the style sheet or something Any help would be greatly appreciated.

  24. Bodie says:

    Is there a way to make the button not change or “activate” when clicked? I’m doing server-side pagination, so when they click a page number it loads a new page. The problem is that it takes a second to load, so it looks like it went to the page then it disappears and actually loads the page. If there was an option to disable activation or something, that would make this just perfect for me. If I don’t hear anything soon, I’ll hack the javascript myself, but would rather stick with the base code.

    Thanks and great job on this!

  25. zataxs says:

    Kindly put your code in github, it will make things more easier for anyone who wants to use your code.

  26. kpsetty says:

    Muhammad,
    The plugin is looking nice. But when i implemented it i am facing some issues, first i am having nested div(one sample provided below), i am having 25 counts like this. secondly based on the “div id” can i jump to that page directly, for eg., i provide one text box if the user enters a particular div id and that div id is suppose in the 4th page, after the users click ok do i able to directly jump to that page.

    —- Sample div contents —–

    35:FF:FA:25:51

    0 MB of 0 GB

    As of 11/14/11, 12:00AM EST

    ——– Samples end ——-

  27. Luke says:

    Hi,

    It would be great if you could have the pagination navigation displaying at the top and the bottom of the paginated data at the same time.

    Is this something you have thought of adding in?

    Great plugin though

  28. Tom says:

    Thanks! Really easy to integrate, made my day :)

  29. rahul says:

    Hi,
    I am unable to use red pagination ( demo 1) . Anyone tell me how to use demo1 . write some code to import content on other pages like ( on page 2 ,3).
    email: rahul_roy_delhi@yahoo.co.in

  30. Finny says:

    really wish the previous and next buttons were visible at all times. The UE guys i work with say it’s a showstopper. bummer.

  31. Ram Kumar says:

    Hi Muhammad,

    You have done really a great work for us. Thanks for all this.
    I am using your paginator on one of our website to display listing of locations. I have customized few of your CSS style but displaying Next, Prev …. are not aligned properly after that on my paginator bar.

    I need to display it something like this- [First] [Prev] [1] [2][Next] [Last]
    Notice that, I want the First, Prev button right before the numbers and Next & last right after it. This whole content is to be aligned center.

    One another thing I want from this paginator is to retrieve the current number of records on the page, total records etc. I will use them to display on the top of the page. Is there any function to fetch these variables?

    I don’t know whats wrong there! Please help me and suggest some fix for it.

  32. chaleb says:

    hi muhammad

    could you send me the working example from the “user can select how many items per page”? (totalpages)

    do you have a set_totalpages function .. since maybe its not necessary to use ajax, a change of the totalpages-option with firebug reflects immediately on the page?

    what is simplest and best practise.

    thx mohammad, your plugin is great
    i allowed myself to link to it from stackoverflow.

    thanks for sending the file or displaying on this page,
    REGARDS

  33. Scyfox says:

    Hi there.

    I’ve managed to change a bit the size of the paginator pages because the jump section wasn’t needed.

    I’ve one question though. Is it possible to add some little transition effect? Like fading? Because sometimes you can’t figure out if the pages are changing or not if you ahve the same thumbnails

    Thanks a lot.

    Really great plugin!

  34. yudz says:

    I am retrieving data from the database, and the total number of records are not fixed. how do i set the total records according to the number of records retrieved? i.e. dynamically.
    hoping for a positive response

  35. Dav says:

    guys, I need to make the first and last button with opacity. so, I need to add a class Active on the first div
    HELP PLEASE

    • You need to add id/class to first and last buttons div and then either add opacity programatically or define CSS to achieve the desired effect.

    • to set first div active you can do something like if($(‘.btn:eq(0)’).html().toLowerCase() == ‘first’) $(‘.btn:eq(0)’).addClass(YOURCLASS HERE); within document.ready function

      • Dav says:

        this below doesn’t work on doc ready, is breaking the whole function.
        if($(‘.btn:eq(0)’).html().toLowerCase() == ‘first’)
        $(‘.btn:eq(0)’).addClass(‘active’);

        Any other solution? the Button Prev (first) has to be hidden on page 1. and with css is impossible.

        Help please…

  36. Dav says:

    Hi Muhammad,
    nice work, I need to make the first and last page on the divs active so like that the Prev and Next button could have the opacity when active.
    Could you help me please?
    thanks,
    D

  37. Natalie says:

    With all the doggone snow we have gotten recently I am stuck indoors, fortunately there is the internet, thanks for giving me something to do. :)

  38. Eben W says:

    Muhammad,

    Are there any known issues around using div’s that have nested div’s as the dataelements with the paginator? My dataelements consist of a div which contains another div that has some content within it. When I apply the paginator to my set of dataelements it seems to be setting that inner div’s style to “display: none” even while the outer div of the dataelement is being displayed.

    Thanks.

  39. Denis says:

    Excellent plugin, easy to use with existing web page.
    Thank you!

    However I have a couple of questions:
    1) If I’d like to place 2 paginators on page – one at top and second at the bottom, then how do I connect them together to change to the same page?
    2) How do I update totalrecord and recordsperpage, whenever user adds data or changes the page size?

    • To connect paginators

      1) implement onchange callback function for both paginators
      2) in the bottom paginator’s onchange callback reinitialize the top paginator with initval to current page
      3) in the top paginator’s onchange callback reinitialize the bottom paginator with initval to current page

      To update totalrecords and recordsperpage, reinitialize the corresponding paginator with new values with in onchange callback function

      • Edward says:

        Hi M., thanks for this tuto.
        Related to connect paginators, I can’t figure out how to get the new initvals to call again each one.
        Do you have any example for this? Anyone knows how to do it?
        Thanks in advance!

        • Edward says:

          Sorry, forget this question, I just find the way.
          By the way, do you have in mind a new version with more options or improvements?
          Thanks again.

  40. Eben W says:

    Muhammad, It’s a nice looking plugin. Are there any issues around support for having nested div tags as the dataelements in the datacontainer? I have a structure like this in my markup

    my dataelement

    some nested content

    my dataelement 2

    some nested content 2

    and the paginator seems to be applying “display: none” to the nested div in the first dataelement (but not to the dataelement itsself) when that dataelement is supposed to be in the set of dataelements to be displayed.

    Any thoughts? Thanks for your time and a nice plugin.

  41. LinuxLuigi says:

    Nice Plugin! What I would like to see is something like 1 …. 10,11,12,13 …. 25. That means the first and the last page number should be shown.

  42. Magnus says:

    Hi – great plugin. I can´t get Prev, Next, First, Last to show up, and I see that it is not working in the demo either. And also I can´t insert number at go input. Any suggestions?

    • See the length parameter, this parameter determines the no of navigation buttons to be generated also next, prev, first and last button are displayed depending on this parameter. If value of length is greater than totalrecords/recordsperpage then next, prev, first and last buttons will not be displayed. Suppose you’ve 100 records and each page displays 10 records and you’ve set length equals 10 (default is also 10), then no of total pages = totalrecords/recordsperpage which is 100/10. So you’ll have 10 pages, as this is less than or equals length so the Smart Paginator will not show the next, prev, first and last button. However if you set the value of length to say 5 then total pages (which are still 10) are greater than length, now the paginator will display the next, prev, first and last buttons.

      • jharbaugh says:

        This doesn’t really make sense from a UI perspective. Is there a way to have Next and Prev always show if there are more than 2 pages?

    • As far as input is concerned the paginator only allows valid value that is between start page and end page

  43. dui lawyers says:

    [...] jQuery Pagination Plugin: Smart Paginator « EGrappler [...]

  44. KH says:

    A++++

    GREAT PLUGIN!! I searched and searched and searched for a nice paginator… found your site at 1:31am in the morning right before I went to bed last night… spent the better part of yesterday fitting it in to my web app… Brilliant work man… absolutely brilliant!

    Thank you so much Muhammad! Your site is bookmarked

  45. KH says:

    A++++

    GREAT PLUGIN!! I searched and searched and searched for a nice paginator… found your site at 1:31am in the morning right before I went to bed last night… spent the better part of yesterday fitting it in to my web app… Brilliant work man… absolutely brilliant!

    Thank you so much Muhammad!

  46. I add a select to the navigation that allows the user to select the number of items per page, via AJAX.

    To do this, i’ve added a select box with a fixed list of items per page (10, 15, 20, 25, 30, all) and a onChange event through which smartpaginator initialize, but does not work correctly.

    If i have 15 records, when i select 10, the smartpaginator updates and show 10, but if i select 20 (the result must be all records) i obtain the first 5 records, if select 25, obtain the 10 first records. The paginator show selected number – total records

    i need to fix the problem, can u help me?

    my code:

    $(‘#items’).change(function () {

    $.ajax({
    type: “POST”,
    url: “results.php”,
    success: function(data) {
    $(“#list”).html(data);

    $(‘#list_paginator’).smartpaginator({
    totalrecords: $(“#list”).children(“.PRODUCT”).length,
    recordsperpage: $(‘#items’).val(),
    datacontainer: ‘list’,
    dataelement: ‘div.PRODUCT’,
    initval: 1,
    next: ‘next’,
    last: ‘last’,
    prev: ‘prev’,
    first: ‘first
    txtgo: ‘go’,
    theme: ‘red’,
    display: ‘double’
    });
    }});

    });

    • Hi Perdo!

      Thanks for using the smartpaginator. As far as your problem is concerned i can see few mistakes in the code.

      instead of recordsperpage: $(‘#items’).val() use recordsperpage : parseInt($(‘#items’).val())
      also there is a syntax error at first:’first you are missing the comma and single quote.

      I’ve also emailed you a working sample. If you need more help you can always contact me :)

  47. theinv says:

    I fix the -1, 0 problem that may sometimes happened in the page indexes by doing the following

    1) replace

    var mid = settings.length / 2;

    with

    var mid = (settings.length / 2) | 0;

    2) check for startIndex befor buildNavigation

    if(startIndex <=0) {
    startIndex = 0;
    }

    buildNavigation(startIndex);

  48. Luke says:

    One other thing, I’m not sure if there are other circumstances but with 5 items to filter and the number of items per page set to 3, the first page is fine but the second page only shows the 4th item not the 5th. I tried this out with your demo for black-colour scheme and the bug exists there too. Cheers, Luke

  49. Luke says:

    Hi,

    This is a great plugin, the only issue I had was the demo text. In the demo you have given example code:

    $(‘#black’).smartpaginator({ totalrecords: 5,
    recordsperpage: 1,
    dataContainer: ‘divs’,
    dataElement: ‘div’,
    theme: ‘black’ });

    The issue is that dataContainer and dataElement should not be camel cased as in your code the options are datacontainer and dataelement instead. This took me a while to realise and is an easy fix as its just a bit of text :)

    Thanks for the great code though.

  50. theinv says:

    hi Muhammad,

    Thanks for the new demo. Really appreciate your work.

    I found one minor bug in my testing. If you set the following options

    totalrecords=32
    recordsperpage=4

    you will see “-1″ and “0″ show up in the page indexes when you click any page index above 6. If I set the recordsperpage to 3, the problem disappears. I guess the “-1″ and “0″ suppose to mean “First”, “Prev”?

  51. theinv says:

    This is a very nice plugin. Just wondering how to integrate it into a real web application?

    On my page, I have searchable filtered list of “ul li” items. The items can be visible or hidden base on the result of the search. I would like the pagination to only paginate on the visible items.

    For example,
    let’s say I have a total of 100 items, and after search 40 of them are visible, the rest are hidden. The hidden items will have ‘hidden’ in the class name. I want the pagination to only apply to the 40 items that are visible.

    I am new to jquery, so I hope your can show a demo on how to achieve this.

    Thanks.

  52. RASHI says:

    how to implement this for list view or a table. i am not able to do so

  53. Steve Avery says:

    Nice work. Although when you go to the last page I expected the next & last links to not be visible like when you start on page 1 the first & previous links aren’t there.

  54. zahid says:

    I tried to use it. I have faced a problem when i m on the last page and then manually GO to the 3rd page, it takes me on the 37th and if I press prev on that. It shows NaN.

Leave a Reply

Your email address will not be published. Required fields are marked *


eight + 6 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>