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:
- count: The total number of pages
- start: With which number the visible pages should start
- display: How many page numbers should be visible
- border: If there should be a border (true/false)
- border_color: Color of the border
- text_color: Color of the text/numbers
- background_color: Background color
- border_hover_color: Border color when hovering
- text_hover_color: Text color when hovering
- background_hover_color: Background color when hovering
- images: If the arrows should be images or not (true/false)
- 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.
- onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.
All we know, that when we facing with necessarity to display large amount of data – we starting thinking about adding pagination. So we split all our content to several pages. And in this case – each page contain some part of our information. As usual this is server-side pagination, where we extracting necessary amount data from database for each page. But commonly, in case of small (or middle) data sets – we don`t need such pagination. And we can just use user-side pagination using javascript to manage with our pages. Today I will show you how to create such pagination.
Here are samples and downloadable package:
You can download the source files and start coding, I will help you!
XHTML
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/imtech_pager.js"></script>
<div>
<h3><a href="#">Paragraph pagination sample</a></h3>
<div id="content">
<div>Some text here !!! </div>
</div>
<div id="pagingControls"></div>
</div>
<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
pager.paragraphsPerPage = 5; // set amount elements per page
pager.pagingContainer = $('#content'); // set of main container
pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
pager.showPage(1);
});
</script>
As you see – we put all content inside <div id=”content”> element into P paragraphs. And than, using jQuery – doing small initialization of our pagination into prepared <div id=”pagingControls”></div> element. Inside our initialization js script – you can see that I set our container element, name of paragraph tag, and amount paragraphs per page (5). All easy.
Update! I changed tag for paragraphs <p> to <div class=”xxx”> for better selections. Now it able to handle with inline styles and tags
css
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:1000px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
#content p{text-indent:20px;text-align:justify;}
#pagingControls ul{display:inline;padding-left:0.5em}
#pagingControls li{display:inline;padding:0 0.5em}
jQuery
You have to download jquery.min.js.
imtech_pager.js
var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = '#pagingControls';
this.pagingContainerPath = '#content';
this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}
return numPages;
};
this.showPage = function(page) {
this.currentPage = page;
var html = '';
this.paragraphs.slice((page-1) * this.paragraphsPerPage,
((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
html += '<div>' + $(this).html() + '</div>';
});
$(this.pagingContainerPath).html(html);
renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(container, currentPage, numPages) {
var pagingControls = 'Page: <ul>';
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
} else {
pagingControls += '<li>' + i + '</li>';
}
}
pagingControls += '</ul >';
$(container).html(pagingControls);
}
}
For paginating purpose PHP seems like a logical solution, but if you don’t have a huge amount of data you want to paginate, i would suggest paginating with jQuery. It’s not hard at all, and in this tutorial we will make a jQuery pagination system.
Why paginate with jQuery?
- it’s much much much faster
- doesn’t make a database query for each page
- easy to implement
- and again…much FASTER then PHP
Why NOT paginate with jQuery?
Well the only the reason not to paginate using javascript is that there is a possibility that javascript is turned off in the browser of the user…but that’s a really small possibility.
HTML
<!-- the input fields that will hold the variables we will use --> <input type='hidden' id='current_page' /> <input type='hidden' id='show_per_page' /> <!-- Content div. The child elements will be used for paginating(they don't have to be all the same, you can use divs, paragraphs, spans, or whatever you like mixed together). '--> <div id='content'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p> You can Add More Data Here</p> </div> <!-- An empty div which will be populated using jQuery --> <div id='page_navigation'></div>
jQuery
$(document).ready(function(){
//how much items per page to show
var show_per_page = 5;
//getting the amount of elements inside content div
var number_of_items = $('#content').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//now when we got all we need for the navigation let's make it '
/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html = '<a href="javascript:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a href="javascript:next();">Next</a>';
$('#page_navigation').html(navigation_html);
//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');
//hide all the elements inside content div
$('#content').children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
}
This article is very useful to create jquery pagination. If you didn’t understand any part of it just say so and i will try to further explain it. I hope you enjoy it!
Fantastic jquery pagination!!