JQuery Pagination Plugin Update – Multiple Results
Made some adjustments to the jquery pagination plugin.
Originally, it display use one result per page, but doesn’t display multiple results per page. It DOES adjust the pagination navigation which is nice. So I modified it.
First, I need a global vars object to be able to track the items per page and number of entries on the page. Ideally, these would be incorporated within the plugin itself:
2
3
4
5
6
$.globalVars = {}
$.globalVars.num_entries = 0;
$.globalVars.items_per_page = 1;
...
Second, when the document is ready, I want to be able to load any content, not just html, as in the demo (though, it is html since we’re using their files):
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
url: 'snippet.html',
type: 'GET',
dataType: 'html',
timeout: 1000,
error: function(){
alert('Error loading data');
},
success: function(html){
$('#hiddenresult').html(html);
$.globalVars.num_entries = $('#hiddenresult div.result').length;
// Create pagination element
//alert(num_entries);
$("#Pagination").pagination($.globalVars.num_entries, {
num_edge_entries: 2,
num_display_entries: 1,
callback: pageselectCallback,
items_per_page:$.globalVars.items_per_page
});
}
});
});
Last, I want to show multiple results, by replacing the eq: tag with splice:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var start_splice = $.globalVars.items_per_page * page_index;
var end_splice = start_splice+$.globalVars.items_per_page;
if(page_index != 0 ) {
start_splice += ($.globalVars.num_entries % $.globalVars.items_per_page);
}
if((end_splice > $.globalVars.num_entries) && ($.globalVars.num_entries > 1)) {
end_splice = $.globalVars.num_entries;
}
var new_content = $('#hiddenresult div.result').slice(start_splice,end_splice).clone();
$('#Searchresult').empty().append(new_content);
return false;
}
You can see the demo here
Happy Coding!
FTD
12 Comments to JQuery Pagination Plugin Update – Multiple Results
Does this demo show multiple items? I still only see one item on each page?
melAugust 17, 2009
ah, once I downloaded it and changed the variable for items_per_page then more than one showed up. Most excellent. thank you.
I do have one other question, is there a way to have the contents of the “results” div class displayed on the page, instead of called in via snippet.html ?
I don’t see why not. But that would mean that your “data source” were on the page hidden possibly in a php var.
If that were the case, then you could get rid of the “ajax” function nearly entirely, and just call the “pageselectCallback” with what you want.
Does that make sense?
NuttsOctober 7, 2009
How would a novice go about doing that?
Seriously, this thing’s all over the net with NO proper demonstrations as to it’s use. You are the only one I could find that actually had a fix but you are assuming that we all know how to “get rid of the “ajax” function nearly entirely, and just call the “pageselectCallback” with what you want.” What does that mean exactly?
I would be calling data from a database myself and wanting to load the results into a container. How do I get this to work properly in that instance, please?
Hi Nutts,
I feel your pain. That’s why I wrote the post going into a bit more detail on it – to help others like me.
All the “ajax” really does is load the html content you want to paginate through into your “hiddenresults” div. By pulling it out of the html file, and place it into the div directly, you can get away from using ajax. Then just move the functions you called from the “success” ajax handler outside of it (so make sure they’re still called).
Just to help out, I’ve created jQuery Pagination – Inline (view source) version of the demo. You can view it here:
jQuery Pagination – Inline (view source)
And the jQuery Pagination – Ajax (view source):
jQuery Pagination – Ajax (view source)
FTD
d8nielNovember 11, 2009
Thanks for the great info, it is very helpful.
I have a quick question, I’m not seeing an easy way to replace the ‘prev’ and ‘next’ with images. Am I missing something?
Great site, BTW 
No problem man!
It’s pretty quick. You’ll notice the Next link is just an anchor tag with a class of “next”.
Just replace the text with an image. Or style up the “.next” css in your stylesheet!
Make sense?
Change:
1 | <a class="next" href="#" rel="nofollow">Next</a> |
To:
1 | <a class="next" href="#" rel="nofollow"><img src="someImage.png" title="alwaysHaveATitle" width="123px" height="123px" border="0" /></a> |
Hello !
If you want using pagination plugin, pls try it here: http://kenphan.info/view/2010/01/Cach-su-dung-jQuery-jPager-plugin.html
That is a simple page used AJAX and JSON. The name is jPager. That jPager is easy install & simply.
Download it here: kenphan.info/download.jpager.rar
Haven’t tried it yet, but I’ll review it. Nice!
Note: Realize it is an old post but I wanted to note that if you allow more than one “items_per_page”, and only have one actual item returned, the following code will prevent that one item from displaying even though the pagination bar is set correctly:
if(end_splice > $.globalVars.num_entries) {
end_splice = $.globalVars.num_entries – 1;
}
Fixed by changing to:
if(end_splice > $.globalVars.num_entries && $.globalVars.num_entries > 1) {
end_splice = $.globalVars.num_entries – 1;
}
Good call, Doug!
Modified the code. Thanks! In testing this, I could if I changed the end_splice it resolved properly on even and odd number of entries.
1 | end_splice = $.globalVars.num_entries; |
DejanJanuary 2, 2011
Thank you!
Leave a comment
August 17, 2009