Fork me on GitHub
Post Format

jQuery Pagination Plugin: Smart Paginator

Smart Paginator is a comprehensive jQuery Pagination plugin that makes adding pagination very simple task, all the navigation logic is built in and it is also very customizable. Smart Paginator jQuery Pagination plugin can also filter your data automatically on client side. Click the screen shot below for the demonstration to see the various filter options provided by Smart Paginator. Smart Paginator supports variety of parameters and custom themes, that can be used to customize the look and feel to your desire.

Smart Paginator plugin screen

Smart Paginator Parameters
  • totalrecords: Total no of records e.g. 50
  • recordsperpage: No of records on each page e.g. 10
  • controlsalways: If true next,prev,first and last buttons will be always visible
  • datacontainer: ID of HTML element which has the data you want to filter e.g id of some table
  • dataelement: Child elements type that you want to filter e.g. ‘tr’ in case your data container is a table, see the demonstration for different options.
  • length: 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, default value of length is 10.
  • initval: Initial page to be selected, default is 0.
  • next: Text on Next button e.g. ‘Next’
  • prev: Text on Previous button e.g. ‘Prev’
  • first: Text on First button e.g. ‘First’
  • last: Text on Last button e.g. ‘Last’
  • go: Text on Go button e.g. ‘Go’
  • theme: CSS class for theme e.g.’green’
  • display: Navigation display depending on the value ‘double’ or ‘single’
  • onchange: callback function to be called on each value change, this function will give you the page no, starting index of data and end index of data.
Styling Smart Paginator

Styling Smart Paginator is very easy, you just need to define four CSS classes, for example to create theme named “green” we’ll define our CSS like below.

.green
{
	background-color: #4f7305;
}
.green.normal
{
	background-color: #588500;
	color: White;
	border: solid 1px #5f9000;
}
.green.active
{
	background-color: #344C00;
	color: #F8EB00;
	border: solid 1px #5f9000;
}
.green .btn
{
	background-color: #588500;
	color: White;
	border: solid 1px #5f9000;
}

Now you can pass “green” as a parameter value for theme in the initializer method for Smart Paginator.

Using Smart Paginator

In your HTML file add the following in the head section.

  • Add a reference to latest jQuery script
  • Add a reference to smartpaginator.js file
  • Add a reference to smartpaginator.css

Create a text block element (e.g. div)within the body of your HTML file as shown below.


<div id="smart-paginator" > </>

Also add the following code to your HTML file’s head section.

   <script type="text/javascript">
        $(document).ready(function() {
              $('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange

            });

            function onChange(newPageValue) {
                alert(newPageValue);
            }
    </script>

Here is the complete code for the example above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Smart Pagination</title>
    
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="smartpaginator.js" type="text/javascript"></script>

    <link href="smartpaginator.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {

            $('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange

            });

            function onChange(newPageValue) {
                alert(newPageValue);
            }
        });
    </script>

</head>
<body>
    <div id="smart-paginator">
    </div>
</body>
</html>

Update History
  • Mar 15, 2011 Published.
  • Apr 03, 2011 Updated demo and added New Parameters ‘recordStartIndex’, and ‘recordEndIndex’ to onchange callback function.
  • Apr 21, 2011 Minor issue fixed and demo updated.
  • Feb 21, 2012 Vertical alignment issue fixed.
  • Feb 22, 2012 Next,prev,first and last button visibility parameter added.

No related posts.

113 comments

  1. Pingback: jQuery Pagination Plugins - DESIGNTOOLEXPERTDESIGNTOOLEXPERT

  2. Pingback: | نشریه مدیریت و کیفیت

  3. Pingback: 15 Useful jQuery Pagination Plugins | teknorun.com Tutorial

  4. Pingback: 20 个 jQuery 分页插件和教程,附带实例 – 90互联网数据中心

  5. Pingback: 2011 Yılının En İyi JQuery Eklentileri | PcBilkent

  6. Pingback: 10 jQuery Pagination Plugins,jquery, pagination, jquery pagination, easy pagination

  7. Pingback: jQuery Pagination Plugin: Smart Paginator - Clean Business

  8. 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!

    Reply
  9. 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!

    Reply
      • 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!

        Reply
  10. 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

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

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

        Reply
  11. Pingback: 20+ jQuery Pagination Plugins. - Pillaticos | Pillaticos

  12. Pingback: 20+ jOuery Pagination Plugins. - Pillaticos | Pillaticos

  13. 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!

    Reply
  14. 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″

    Reply
  15. Pingback: Thursday Roundup # 5 | EGrappler

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

    Reply
    • 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 });

      Reply
  17. Pingback: 20 个 jQuery 分页插件和教程,附带实例 | 简简单单…

  18. Pingback: 11 jQuery Pagination Plugins you must try « CSS Tips

  19. Pingback: 11 jQuery Pagination Plugins you must try « Swadesh's Programming Blog

  20. Pingback: 20 jQuery plug-ins page and tutorials, with examples - Open News

  21. Pingback: 20 个 jQuery 分页插件和教程,附带实例 | 极地 EA163

  22. Pingback: Best Ajax jQuery Pagination Plugin & Tutorial with Example & Demo

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

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

    Reply
  25. Ruud Aalders

    05/03/2012 @ 9:55 am

    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

    Reply
  26. 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

    Reply
  27. 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

    Reply
  28. Hi

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

    Thank you

    Reply
  29. 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

    Reply
  30. 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.

    Reply
  31. Pingback: 23 Free jQuery Pagination Plugins for Web Designers

  32. 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!

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

    Reply
  34. 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 ——-

    Reply
  35. 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

    Reply
  36. Pingback: 10 jQuery Pagination Plugins | jQuery4u

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

    Reply
  38. 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.

    Reply
  39. 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

    Reply
  40. 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!

    Reply
  41. 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

    Reply
  42. 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

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

        Reply
  43. 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

    Reply
  44. 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. :)

    Reply
  45. 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.

    Reply
  46. 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?

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

      Reply
      • 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!

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

          Reply
  47. 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.

    Reply
  48. 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.

    Reply
  49. 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?

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

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

        Reply
  50. 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

    Reply
  51. 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!

    Reply
  52. 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’
    });
    }});

    });

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

      Reply
  53. 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);

    Reply
  54. 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

    Reply
  55. 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.

    Reply
  56. 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”?

    Reply
  57. 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.

    Reply
  58. 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.

    Reply
  59. Pingback: Smart Paginator - Comprehensive jQuery Pagination Plugin | Blogupstairs

  60. Pingback: jQuery Pagination Plugin: Smart Paginator | Greepit

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

    Reply
  62. Pingback: Smart and stylish | Internet Marketing Online

  63. Pingback: Smart and stylish | Internet Advertising

Leave a Reply

Required fields are marked *.


eight × = 48