// ----------------------------------------------------------------------------
// Pagination Plugin - A jQuery Plugin to paginate content
// v 1.0 Beta
// Dual licensed under the MIT and GPL licenses.
// ----------------------------------------------------------------------------
// Copyright (C) 2010 Rohit Singh Sengar
// http://rohitsengar.cueblocks.net/
// ----------------------------------------------------------------------------
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
// ----------------------------------------------------------------------------
//------------ initializing all the values needed in paginator. -----------------
//--- Variables for internal use ----
var pageElement = Array();
var paginatorId = '#pager';
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 = 5; // no. of items you want to show on one page
var firstPageSymbol = '<<'; // to indicate First Page
var inactivePageSymbol = '';
var activePageSymbol = '';
var inactivePreviousPageSymbol = ''; // to indicate Previous Page
var activePreviousPageSymbol = '';
var inactiveNextPageSymbol = ''; // to indicate Next Page
var activeNextPageSymbol = '';
var lastPageSymbol = '>>'; // to indicate Last Page
var separator = ' '; // To separate paginator's items
var paginatorPosition = 'bottom'; // where you want the paginator to be. Accepted values are 'top','bottom','both'
var paginatorStyle = 3; // 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 = 'Prejdi na stranu:'; // 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 = false; // 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; }
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
{
$(".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 = ''+activeNextPageSymbol+'';
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 = ''+inactiveNextPageSymbol+'';
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 + '';
$(".paginator").html(style);
}
// --------------------- Plugin Ends ----------------------------
';
var activePageSymbol = '
';
var inactivePreviousPageSymbol = '
'; // to indicate Previous Page
var activePreviousPageSymbol = '
';
var inactiveNextPageSymbol = '
'; // to indicate Next Page
var activeNextPageSymbol = '
';
var lastPageSymbol = '>>'; // to indicate Last Page
var separator = ' '; // To separate paginator's items
var paginatorPosition = 'bottom'; // where you want the paginator to be. Accepted values are 'top','bottom','both'
var paginatorStyle = 3; // 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 = 'Prejdi na stranu:'; // 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 = false; // 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; }
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
{
$(".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 = ''+activeNextPageSymbol+'';
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 = ''+inactiveNextPageSymbol+'';
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 + '';
$(".paginator").html(style);
}
// --------------------- Plugin Ends ----------------------------