jQuery Pagination Plugin: Good Paginator
Good Paginator is a complete jQuery Pagination plugin that makes including pagination quite simple activity, all of the navigation logic is inbuilt, and it is usually very customizable. Excellent Paginator jQuery Pagination plugin may filter your knowledge routinely on shopper aspect. Click on the display shot under for the demonstration to see the different filter choices supplied by Good Paginator. jQuery Good Paginator helps some parameters and customized themes that can be utilized to customize the appear and feel to your want.
Contents
Good Paginator Parameters
- total records: Whole no of data e.g. 50
- records per page: No of data on every web page e.g. 10
- controls always: If real subsequent, prev, first and final buttons might be at all times seen
- data container: ID of HTML ingredient which has the info you wish to filter, e.g., the id of some desk
- Dataelement: Baby parts sort that you only want to filter e.g. ‘tr’ in case your knowledge container is a desk, see the demonstration for various choices.
- Size: This parameter determines the no of navigation buttons to be generated additionally subsequent, prev, first and final button are displayed relying on this setting. If the worth of size is larger than total records/records per page then subsequent, prev, first and final buttons are not going to be displayed, default worth of size is 10.
- Initval: Preliminary web page to be chosen, default is zero.
- Subsequent: Textual content on Subsequent button e.g. ‘Subsequent.’
- prev: Textual content on Earlier button e.g. ‘Prev.’
- first: Textual content on First button e.g. ‘First.’
- final: Textual content on Final button e.g. ‘Final.’
- go: Textual content on Go button e.g. ‘Go.’
- theme: CSS class for theme e.g.’inexperienced.’
- show: Navigation show relying on the worth ‘double’ or ‘single.’
- change: callback operate to be known as on every worth change; this act provides you with the web page, no beginning index of knowledge and finish index of knowledge.
Styling Good Paginator
Styling Good Paginator may be very simple. You simply have to outline 4 CSS courses, for instance, to create a theme named “inexperienced” we’ll describe our CSS.
.inexperienced .inexperienced.regular .inexperienced.energetic .inexperienced .btn
Now you’ll be able to move “naive” as a parameter worth for theme within the initializer technique for Good Paginator.
Utilizing Good Paginator
In your HTML file add the next within the head part.
- Add a reference to newest jQuery script
- Reference to smartpaginator.js file
- Add a reference to smartpaginator.css
Create a textual content block ingredient (e.g. div)inside the physique of your HTML file.
<div id="smart-paginator" > </>
Additionally, add the next code to your HTML file’s head part.
<script sort="textual content/javascript">
$(doc).prepared(operate() {
$('#smart-paginator').smartpaginator();
operate onChange(newPageValue)
</script>
Right here is the whole code for instance above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Good Pagination</title>
<script src="jquery-1.four.four.min.js" sort="textual content/javascript"></script>
<script src="smartpaginator.js" sort="textual content/javascript"></script>
<hyperlink href="smartpaginator.css" rel="stylesheet" sort="textual content/css" />
<script sort="textual content/javascript">
$(doc).prepared(operate() );
</script>
</head>
<physique>
<div id="smart-paginator">
</div>
</physique>
</html>
Replace Historical past
- Mar 15, 2011, Revealed.
- Apr 03, 2011 Up to date demo and added New Parameters ‘recordStartIndex’, and ‘recordEndIndex’ to onchange callback operate.
- Apr 21, 2011, Minor subject mounted and demo up to date.
- Feb 21, 2012, Vertical alignment subject mounted.
- Feb 22, 2012, Subsequent, prev, first and final button visibility parameter added.
Paginator Plugin Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
SUPERB PLUGIN!! We researched along with researched and additionally needed a paginator… found your websites from 1: 31am in the morning prior to My partner and i went around to base last night… wasted better an important part of the other day fitted this straight into your web site app… Brilliant succeed man… definitely dazzling!
Thank you so much Muhammad!
Handy list, pagination is cool process, I love jQuery pagination plugins.
Thanks for sharing about jQuery Pagination Plugin: Smart Paginator. It is very useful for seo…………..
Nice jQuery Pagination Plugin code for Smart Pagination. It is really informative for us. Thanks saleem for sharing about jQuery Pagination………
Great information about jQuery Pagination Plugin: Smart Paginator. Your information is really informative for us
Hi, thanks for this excelent plugin, great job.
I´m paginating a table that retrieve data from a search in mysql, for each search, different lenghts. Is there anything like autosize or other solution?
Tks
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!
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”
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!
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;
}
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…
Fixed it! thanks to your suggestion of putting “!important” on the width property…thanks again for your help 🙂
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!
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”
Thanks for this Awesome Plugin.
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 });
Thank you! issue resolved
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. 🙂
It’s here http://www.egrappler.com/license
hello guys, can someone tell me please how to remove the right “Go” button and the input field?
Add the following at the end of your CSS file.
.pager div.short
{
display:none;
}
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
Excellent work…very useful plug in thanks !!
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
Can you show me how you are using it?
Thanks for pointing it out, it has been fixed now. Grab the latest script from the download section above.
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
Check your CSS, it may be overriding paginator’s style.
Hi
Would it be possible to have the page numbers aligned to the left instead of to the right side?
Thank you
Yes, do can change the look and feel whatever way you like, go to CSS and specify the position and floating there.
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
It has been fixed, thanks for pointing it out. Check the latest demo here
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
Why I can’t download or view a demo of Smart Paginator?
You might have access the site in the middle of update. I’ve updated site theme. You can check it now its working.http://www.egrappler.com/contents/smartpaginator/demo/smartpaginator.htm
http://www.egrappler.com/contents/smartpaginator/source/smartpaginator.zip
THX IT work now 😀
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.
figured it out I was not setting the header row to be th once I did that it worked. thanks
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!
Kindly put your code in github, it will make things more easier for anyone who wants to use your code.
Thanks for your suggestion I’ll do it definitely.
Thanks for the suggestion, I’ve started putting code on github
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 ——-
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
Nice idea, will give it a try.
Thanks! Really easy to integrate, made my day 🙂
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: [email protected]n
really wish the previous and next buttons were visible at all times. The UE guys i work with say it’s a showstopper. bummer.
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.
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
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!
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
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
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…
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
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. 🙂
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.
can you show me HTML markups you are using, it would be easy for me to investigate the problem
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
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!
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.
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.
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.
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.
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
[…] jQuery Pagination Plugin: Smart Paginator « EGrappler […]
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
KH, special thanks for appreciation!!!
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!
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 🙂
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);
I appreciate your effort, i’ve also updated the plugin code, did you check that?
Thanks a lot, that is a much needed fix.
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
Thanks luke for your comments, the issue has been fixed now:)
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.
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”?
Thanks for your appreciation, i’ve fixed the issue you reported.
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.
I’ve updated the demo, it shows how you can automatically filter your records using smart paginator, have a look at the demonstration Here
how to implement this for list view or a table. i am not able to do so
Smart Paginator plugin gives you the page number which you can use to to filter records. Remember you need to do this on client side, i’ll also update the demo to show you how
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.
Thanks steve for your comment, yes it was an issue, which is fixed now.
Hi dear good work, nice pagination….
http://www.raghibsuleman.com/
Thanks
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.
Fixed now, you are always a big help 🙂