(function ($) {
$.fn.extend({
jqPaginator:function (opt){
var defaults = {
totalNum:0, //总条数
currentPage:1, //当前显示页
pageSize:10, //当前显示条目数
pagesSize:[5,10,50,100], //显示条目数 select
elem:this,
totalPage:0,
targetPage:1,
callback:null
}
var set = $.extend(defaults,opt||{});
set.totalPage = Math.ceil(set.totalNum/set.pageSize) ;
var _parent= this;
if(set.currentPage>set.totalPage||set.currentPage<1){
set.currentPage = 1;
}
var n = 0,htm = '';
var clickpages = {
elem:set.elem,
callback:set.callback,
init:function(){
this.elem = $(_parent).find(".pagination");
this.jumpPages();
this.initSelect();
this.elem.children('li').click(function () {
var txt = $(this).children('a').text();
var btn = $(this).children('a').attr("data-target");
var page = '', ele = null;
var page1 = parseInt(clickpages.elem.children('li.active').attr('page'));
if (isNaN(parseInt(txt))) {
switch (btn) {
case 'next':
if (page1 == set.totalPage) {
return;
}
if (page1 >= (set.totalPage - 2) || set.totalPage <= 6 || page1 < 3) {
ele = clickpages.elem.children('li.active').next();
set.currentPage = page1;
} else {
clickpages.newPages('next', page1 + 1);
ele = clickpages.elem.children('li.active');
}
break;
case 'pre':
if (page1 == '1') {
return;
}
if (page1 >= (set.totalPage - 1) || page1 <= 3 || set.totalPage <= 6) {
ele = clickpages.elem.children('li.active').prev();
set.currentPage = page1;
} else {
clickpages.newPages('pre', page1 - 1);
ele = clickpages.elem.children('li.active');
}
break;
case 'first':
if (page1 == '1') {
return;
}
if (set.totalPage > 6) {
clickpages.newPages('first', 1);
}
ele = clickpages.elem.children('li[page=1]');
break;
case 'last':
if (page1 == set.totalPage) {
return;
}
if (set.totalPage > 6) {
clickpages.newPages('last', set.totalPage);
}
ele = clickpages.elem.children('li[page=' + set.totalPage + ']');
break;
case 'ellipsis':
if($(this).find("a").hasClass("ellipsisL")){
if(set.currentPage-5<1){
set.currentPage = 1;
}
else{
set.currentPage -= 5;
}
}else {
if(set.currentPage+5>set.totalPage){
set.currentPage = set.totalPage;
}
else{
set.currentPage += 5;
}
}
clickpages.newPages('jump',set.currentPage );
ele = clickpages.elem.children('li[page=' + set.currentPage + ']');
break;
}
} else {
if ( set.totalPage > 6) {
clickpages.newPages('jump', parseInt(txt));
}
ele = $(this);
}
set.currentPage = clickpages.actPages(ele);
clickpages.setCursor();
if (clickpages.callback){
set.callback(set.pageSize,set.currentPage);
}
});
},
setCursor:function () {
$(_parent).find(".pre").css({cursor:set.currentPage==1?"no-drop":"pointer"});
$(_parent).find(".next").css({cursor:set.currentPage==set.totalPage?"no-drop":"pointer"})
},
//active
actPages:function (ele) {
if(!ele){
return;
}
ele.addClass('active').siblings().removeClass('active');
return parseInt(clickpages.elem.children('li.active').text());
},
initSelect:function () {
$(_parent).find(".pageSizeSelect li").on("click",function (e) {
$(_parent).find(".pageSizeSelect ul").slideUp(300);
$(this).parents(".pageSizeSelect").find("input").val($(this).text());
set.pageSize = parseInt($(this).text());
set.totalPage = Math.ceil(set.totalNum/set.pageSize) ;
set.currentPage =1 ;
$(_parent).find(".pageSizeSelect .icon_select").removeClass("animateRotate");
if (clickpages.callback){
set.callback(set.pageSize,set.currentPage);
}
initPage();
/* setTimeout(function () {
initPage(); //动画执行完后再 重绘
},500)*/
});
$(_parent).find(".pageSizeSelect .initPageClick").on("click",function (e) {
$(_parent).find(".pageSizeSelect ul").slideDown(300);
$(_parent).find(".pageSizeSelect .icon_select").addClass("animateRotate");
})
},
jumpPages:function () {
this.elem.next('div.pageJump').children('.curPage').on("keydown",function(e){
if(!(e.keyCode==13)){
return ;
}
var i = parseInt($(this).val());
if(i>set.totalPage){
set.currentPage = set.totalPage;
set.targetPage = set.totalPage;
initPage();
}else if(set.totalPage>6){
set.currentPage = i;
set.targetPage = i;
initPage();
}else{
set.currentPage = i;
set.targetPage = i;
var ele = clickpages.elem.children('li[page='+i+']');
clickpages.actPages(ele);
if (clickpages.callback){
set.callback(set.pageSize,set.currentPage);
}
return;
}
if (clickpages.callback){
set.callback(set.pageSize,set.currentPage);
}
})
},
//newpages
newPages:function (type, i) {
set.currentPage = i;
var html = "",htmlLeft="",htmlRight="",htmlC="";
var HL = '<li><a data-target="ellipsis" class="ellipsis ellipsisL" title="向前五页">.</a></li>';
var HR = '<li><a data-target="ellipsis" class="ellipsis ellipsisR" title="向后五页">.</a></li>';
/* var html='<li><a data-target="first" class="pagination_btn first"></a></li>\
<li><a data-target="pre" class="pagination_btn pre"></a></li>';*/
var html='<li><a data-target="pre" class="pagination_btn pre" style="cursor: '+(set.currentPage==1?"no-drop":"pointer")+'"></a></li>';
for (var n = 0;n<3;n++){
htmlC += '<li '+((n-1)==0?'class="active"':'')+' page="'+(i+n-1)+'"><a>'+(i+n-1)+'</a></li>';
htmlLeft += '<li '+((n+2)==i?'class="active"':'')+' page="'+(n+2)+'"><a>'+(n+2)+'</a></li>';
htmlRight += '<li '+((set.totalPage+n-3)==i?'class="active"':'')+' page="'+(set.totalPage+n-3)+'"><a>'+(set.totalPage+n-3)+'</a></li>';
}
switch (type) {
case "next":
if(i<=4){
html+='<li page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}else if(i>=(set.totalPage-3)){
html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}else{
html += '<li page="1"><a>1</a></li>'+HL+htmlC+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}
break;
case "pre":
if(i<=4){
html+='<li page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}else if(i>=(set.totalPage-3)){
html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}else{
html += '<li page="1"><a>1</a></li>'+HL+htmlC+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}
break;
case "first" :
html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
break;
case "last" :
html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
break;
case "jump" :
if(i<=4){
if(i==1){
html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}else{
html+='<li page="1"><a>1</a></li>'+htmlLeft+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}
}else if((i>=set.totalPage-3)&&(set.totalPage>=7)){
if(i==set.totalPage){
html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}else{
html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}
}else{
html += '<li page="1"><a>1</a></li>'+HL+htmlC+HR+'<li page="'+set.totalPage+'"><a>'+set.totalPage+'</a></li>';
}
}
/* html +='<li><a data-target="next" class="pagination_btn next"></a></li>\
<li><a data-target="last" class="pagination_btn last"></a></li>';*/
html +='<li><a data-target="next" class="pagination_btn next" style="cursor: '+(set.currentPage==set.totalPage?"no-drop":"pointer")+'"></a></li>';
if (set.totalPage > 5 || set.totalPage < 3) {
_parent.html(getTemplate(html));
clickpages.init();
}
}
}
var getTemplate = function (html) {
var template = '';
var cssStyle = (window.innerHeight-_parent[0].getBoundingClientRect().bottom)>130?"top:34px":"bottom:34px";
var warpper = "<ul class='pagination'>"+html+"</ul>";
var pageSizeTemplate = "";
set.pagesSize.forEach(function (item,index) {
pageSizeTemplate += "<li>"+item+"</li>" ;
})
var first = '<div class="totalPage">共 <span>'+set.totalNum+'</span> 条</div> <div class="pageSizeSelect"><i class="icon_select initPageClick"></i><input type="text" readonly class="pageSize initPageClick" value="'+set.pageSize+'"><ul style="display: none;'+cssStyle+'">'+pageSizeTemplate+'</ul></div>';
var end = '<div class="pageJump"> <span>跳转至</span> <input type="text" onkeypress="return (/[\\d]/.test(String.fromCharCode(event.keyCode)))" class="curPage" value="'+set.targetPage+'"/> <span>页</span></div>';
template = '<div class="z_wrapperPage">' +first + warpper + end+'</div>';
return template
}
var initPage = function () {
if(set.totalPage<1){
$(set.elem).html('');
return;
}else if(parseInt(set.totalPage)<=6){
n = parseInt(set.totalPage);
var html='<li><a data-target="pre" class="pagination_btn pre" style="cursor: '+(set.currentPage==1?"no-drop":"pointer")+'"></a></li>';
for(var i=1;i<=n;i++){
if(i==set.currentPage){
html+='<li class="active" page="'+i+'"><a>'+i+'</a></li>';
}else{
html+='<li page="'+i+'"><a>'+i+'</a></li>';
}
}
html +='<li><a data-target="next" class="pagination_btn next" style="cursor: '+(set.currentPage==set.totalPage?"no-drop":"pointer")+'"></a></li>';
_parent.html(getTemplate(html));
clickpages.init();
}else{
clickpages.newPages("jump",set.currentPage)
}
}
initPage();
this.opt = set;
this.setTotalNum = function(totalNum){
set.totalNum = totalNum ;
set.totalPage = Math.ceil(set.totalNum/set.pageSize) ;
initPage();
};
this.setCurrentPage = function(currentPage){
set.currentPage = currentPage ;
initPage();
};
return this ;
}
})
$(document).on("click",function (e) {
if($(e.target).hasClass("initPageClick")){
// if(e.target.localName == 'input' && $(e.target).hasClass("pageSize")){
// 点击select input
}
else {
$(".z_wrapperPage").find(".pageSizeSelect ul").slideUp(300);
$(".pageSizeSelect .icon_select").removeClass("animateRotate");
}
})
})(jQuery);
使用方法如下所示:
============================================
var sitePagination = $("#sitePagination").jqPaginator({
totalNum:0, //总条数
currentPage:1, //当前显示页
pageSize:10, //当前显示条目数
pagesSize:[5,10,50,100], //显示条目数 select
callback:function(pageSize,currentPage){ //回调函数
siteTotalFn(pageSize,currentPage);
}
})
// 初始化
siteTotalFn(sitePagination.opt.pageSize, 1);
// ajax 请求之后
sitePagination.setTotalNum(data.total);
sitePagination.setCurrentPage(currentPage);
