// ----------------------------------------------------------------------------
// Pagination Plugin - A jQuery Plugin to paginate content
// v 1.0 Beta
// Dual licensed under the MIT and GPL licenses.
// ----------------------------------------------------------------------------
// http://rohitsengar.cueblocks.net/jquery-pagination-plugin/
// ----------------------------------------------------------------------------
//------------ initializing all the values needed in paginator. -----------------
//--- Variables for internal use ----
var pageElement = Array();
var paginatorId = '';
var currentPage = 1; // current page, default 1
var allItems = 0; // no. of repeating items in the container where paginator is applied
var lastPage = 1; // last page, default 1
//--- Attributes that can be changed according to use ---
var startPage = 1; // start page
var itemsPerPage = 3; // no. of items you want to show on one page
var firstPageSymbol = '<<'; // to indicate First Page
var previousPageSymbol = ''; // to indicate Previous Page
var nextPageSymbol = ''; // to indicate Next Page
var lastPageSymbol = '>>'; // to indicate Last Page
var separator = ' | '; // To separate paginator's items
var paginatorPosition = 'top'; // where you want the paginator to be. Accepted values are 'top','bottom','both'
var paginatorStyle = 1; // To define which style of paginator you need.
// 1 - for << | < | 1 | 2 | 3 | > | >>
// 2 - for << | < | 1/8 | > | >>
// 3 - for < | 1 | 2 | 3 | >
// 4 - for < | >
var enablePageOfOption = false; // it shows on which are you currently, i.e. Page 3 of 6 Page(s), if turned true
var enableGoToPage = false; // shows a drop down of all pages for go/jump to any page user want to go, if turned true. Useful incase there are large no. of pages
var textGoToPage = 'Jump to'; // text for above option. You can change it to 'Jump to Page' or anything you like. The above option needs to turned on for this.
var enableSelectNoItems = false; // if you want to change items per page on the fly.
var textSelectNoItems = 'Items Per Page'; // text for above option. You can change it to 'Change No. of tag/page' or anything you like. The above option needs to turned on for this.
var paginatorValues = Array(5,10,15,20,25,30); // list of values for above option (enableSelectNoItems).
var anchorLink = 'javascript:void(0);'; // if you want to change href of the paginator anchor text (links for page) to '#' or to something else. As # is append on the address bar upon clicking I used javascript:void(); which is clean.
var showIfSinglePage = true; // set it to false if you don't want to show paginator incase there is only one page, true if show paginator even if there is just one page.
//-----------functions starts----------------------------------------------------
// function for extending function to dom object. Read more about it in jQuery docs.
jQuery.fn.extend({
pagination: function() {
paginatorId=this;
switch(paginatorPosition) // create paginator div (container for paginator) according to the position mentioned by user.
{
case 'top': { paginatorId.before(''); break; }
case 'bottom': { paginatorId.after(''); break; }
case 'both': { paginatorId.before('');
paginatorId.after(''); break; }
case 'manual': paginatorId.before(''); break;
default: { paginatorId.after(''); }
}
initPaginator(); // calling function to start pagination.
},
depagination: function() {
$('.paginator').remove(); // removing paginator class.
paginatorId.children().show(); // show all content of the div where pagination was applied.
}
});
function initPaginator() // for initializing the paginator
{
if(itemsPerPage < 1)
itemsPerPage = 5;
allItems = paginatorId.children().length; // finding number of total items in content
if(allItems%itemsPerPage == 0) // calculating last page of the paginator
lastPage = parseInt(allItems/itemsPerPage);
else
lastPage = parseInt(allItems/itemsPerPage)+1;
if((startPage < 1)||(startPage > lastPage)) // start page for pagination
startPage = 1;
if(!showIfSinglePage) // check if option is set to false
{
if(lastPage > 1) // show pagination only if there is more than 1 page.
appendContent(startPage, 1);
}
else
appendContent(startPage, 1); // call function to show start page for first time. Fading effect is not required initially.
}
// function for appending the content of selected page. called everytime whenever user clicks on any active link of paginator. set effect true/1 for fading effects, false/0 for changing contents for
function appendContent(page, effect)
{
if(page < 0)
{
if(page == -1)
page = currentPage - 1;
else
page = currentPage + 1;
}
currentPage = page; // get current page or page selected.
till = (currentPage-1)*itemsPerPage;
if(!effect) // Page change without fading effect
{
paginatorId.fadeOut("medium", function () { // fade out the current content
createPaginator(); // create new paginator
paginatorId.children().hide(); // hide all child element of content
paginatorId.children().slice(till, itemsPerPage+till).show(); // show only those items according to page selected.
paginatorId.fadeIn("medium"); // use nice fade in effect to show the items of that selected page.
});
}
else //with fading effect
{
createPaginator(); // create new paginator
paginatorId.children().hide(); // hide all child element of content
paginatorId.children().slice(till, itemsPerPage+till).show(); // show only those items according to page selected.
}
}
function createPaginator() // for creating the paginator
{
jQuery(".paginator").html("");
var style1 = ''; // for << | < | 1 | 2 | 3 | > | >>
var style2 = ''; // for << | < | 1/8 | > | >>
var style3 = ''; // for < | 1 | 2 | 3 | >
var style4 = ''; // for < | >
var pageOfOption = ' Page '+currentPage+' of '+lastPage+' Page(s) '; // for showing page info option
var goToPage = ' '+textGoToPage+' '; // preparing go to option drop down
if(currentPage == lastPage) // for setting paginator style if current page is last page
{
/*style = ''+nextPageSymbol+'';
style1 += style;
style2 += style;
style3 += style;
style4 += style;
style = separator + ''+lastPageSymbol+'';
style1 += style;
style2 += style;*/
}
else // for setting paginator style for last page links
{
style = ''+nextPageSymbol+'';
style1 += style;
style2 += style;
style3 += style;
style4 += style;
/*style = separator + ''+lastPageSymbol+'';
style1 += style;
style2 += style;*/
}
switch (paginatorStyle) // getting which style of pagination is mentioned.
{
case 1 : style = style1; break;
case 2 : style = style2; break;
case 3 : style = style3; break;
case 4 : style = style4; break;
default : style = style1;
}
// appending various other options if they are enabled or set to true.
if(enablePageOfOption)
style += '' + pageOfOption + '';
if(enableGoToPage)
style += '' + goToPage + '';
if(enableSelectNoItems)
style += '' + selectNoItems + '';
jQuery(".paginator").html(style);
}
// --------------------- Plugin Ends ----------------------------