使用的是jquery.z-pager.js插件，底部有其完整代码，
前端一般只需获取后台的几个分页属性对应的值，并通过调用下面方法就可以触发：
（current：当前页码数，totalData：数据总条数）
/*分页*/
var pageNo = "${page.pageNo}";
var count = "${page.count}";
$("#pager").zPager({
current: pageNo,
totalData: count
});
$("#pager a").click(function(){
pageNo = $(this).attr("page-id");
var add = "${pc}/front/activity/list?pageNo="+pageNo;
$(this).attr('href', add);
})
HTML：
<div style="text-align: center;margin:20px auto;">
<div id="pager" class="pager clearfix"></div>
</div>
CSS(记得里面的url要填对对应的图标图片路径)：
.fl {
float: left;
}
.fr {
float: right;
}
.pager {
max-width: 800px;
text-align: center;
margin-bottom: 30px;
display: inline-block;
}
.pager a{
cursor: pointer;
}
.pager a,
.pager span {
width: 29px;
height: 28px;
border: 1px #cccccc solid;
margin-left: -1px;
color: #8a8a8a;
display: inline-block;
line-height: 28px;
float: left;
font-size: 12px;
text-decoration: none;
margin: 0 2px;
}
.pager a:hover,
.pager span:hover {
border-color: #3897cd;
color: #3897cd;
position: relative;
z-index: 1;
}
.pager span.current {
background-color: #3897cd;
color: #fff;
border-color: #3897cd;
position: relative;
z-index: 1;
}
.pager .pg-first,
.pager .pg-prev,
.pager .pg-next,
.pager .pg-last{
background: url(../images/page_bg.jpg) 0 0 no-repeat;
}
.pager .pg-first:hover,
.pager .pg-prev:hover,
.pager .pg-next:hover,
.pager .pg-last:hover{
background: url(../images/page_bg_hover.jpg) 0 0 no-repeat;
}
.pager .pg-prev,
.pager .pg-prev:hover{
background-position: 0 -28px;
}
.pager .pg-next,
.pager .pg-next:hover{
background-position: -29px -28px;
}
.pager .pg-last,
.pager .pg-last:hover{
background-position: -29px 0;
}
.pager .pg-prev[disabled='true'],
.pager .pg-prev[disabled='true']:hover{
cursor: default;
background-image: url(../images/page_bg.jpg);
}
.pager .pg-next[disabled='true'],
.pager .pg-next[disabled='true']:hover{
cursor: default;
background-image: url(../images/page_bg.jpg);
}
.pager .pg-prev[disabled='true'],
.pager .pg-next[disabled='true']{
border-color: #eeeeee;
}
.pager span.els{
border-color: transparent;
}
.pagerHtmlWrap{
width: 800px;
margin: 30px auto;
}
.pagerHtmlWrap .cc_cells{
width: 100%;
height: 35px;
padding: 5px 0;
border-bottom: 1px #cccccc solid;
}
.pagerHtmlWrap .cc_cells a{
color: #454545;
font-size: 14px;
line-height: 35px;
text-decoration: none;
}
.pagerHtmlWrap .cc_cells a span{
display: inline-block;
width: 25%;
text-align: left;
margin: 0;
}
图片（默认图和hover图）：
page_bg.jpg
page_bg_hover.jpg
这是jquery.z-pager.js插件的完整代码（底部可以更改默认的分页属性）：
;(function($){
var methods = {
pageInit: function(options){
/**
* [opts this plug propertys]
* @type {Obeject}
*/
var opts = $.extend({},$.fn.zPager.defaults,options);
return $(this).each(function(k,v){
var _v = $(v);
_v.data("options",opts);
methods.pageData(_v, opts.current);
})
},
pageData: function(_v, _current){
/**
* [opts this plug propertys]
* @type {Obeject}
*/
var opts = _v.data("options");
var t = opts.totalData, p = opts.pageData, ajaxOpts = null;
if(opts.ajaxSetData&&(typeof(opts.ajaxSetData)==='boolean')){
if(opts.url!=='' && typeof(opts.url)==='string'){
ajaxOpts = methods.ajaxData(opts.url, _current);
t = opts.totalData = ajaxOpts.total;
if(ajaxOpts.rows.length>0){
var ishasDataRender = (opts.dataRender && typeof(opts.dataRender)==='function');
ishasDataRender ? opts.dataRender(ajaxOpts.rows) : methods.dataRender(_v, ajaxOpts.rows);
}
}else{
$.pageError(2);
}
}
if(t%p === 0){
opts.pageCount = parseInt(t/p);
}else{
opts.pageCount = parseInt(t/p)+1;
}
if(opts.pageCount>0){
_v.data("options",opts);
methods.pageRender(_v, _current);
}
},
dataRender: function(_v, _data){
var opts = _v.data("options");
var cells = '';
for(var i=0;i<_data.length;i++){
cells += '<div class="cc_cells"><a href=""><span>'+_data[i].id+'-'+Math.random()+'</span>';
cells += '<span>'+_data[i].title+'</span>';
cells += '<span>'+_data[i].starttime+'</span>';
cells += '<span>'+_data[i].endtime+'</span>';
cells += '</a></div>';
}
if(opts.htmlBox===''||(typeof(opts.htmlBox)!=='Obeject')){
var abx = _v.prev();
if(!abx.hasClass('pagerHtmlWrap')){
var d = '<div class="pagerHtmlWrap"></div>';
_v.before(d);
}
_v.prev().html(cells);
}else{
opts.htmlBox.html(cells);
}
},
pageRender: function(_v, _current){
/**
* [o this plug propertys]
* @type {Obeject}
*/
var o = _v.data("options");
var _page = o.pageCount;
var _middle = parseInt(o.pageStep/2);
var _tep = _middle-2;
var _html = '';
if(_page>o.pageStep&&_current<=_page){
_html += methods.setPrevNext(o, 'prev');
if(_current<=_middle){
_html += methods.forEach(1, o.pageStep, _current, o.active);
_html += methods.elliPsis();
}else if(_current>_middle&&_current<(_page-_tep)){
_html += methods.pageBtn(1);
_html += methods.elliPsis();
_html += methods.forEach(_current-_tep, _current-(-_tep)-(-1), _current, o.active);
_html += methods.elliPsis();
}else if(_current>=(_page-_tep)){
_html += methods.pageBtn(1);
_html += methods.elliPsis();
_html += methods.forEach(_page-2*_tep-1, _page-(-1), _current, o.active);
}
_html += methods.setPrevNext(o, 'next');
}else if(_page<=o.pageStep){
if(_page>o.minPage){
_html += methods.setPrevNext(o, 'prev');
}
_html += methods.forEach(1, _page-(-1), _current, o.active);
if(_page>o.minPage){
_html += methods.setPrevNext(o, 'next');
}
}
_v.html(_html);
methods.bindEvent(_v);
},
bindEvent: function(_v){
/**
* [o this plug propertys]
* @type {Obeject}
*/
var o = _v.data("options");
var _a = _v.find("a");
$.each(_a,function(index,item){
var _this = $(this);
_this.on("click",function(){
if(_this.attr("disabled")){
return false;
}
var _p = _this.attr("page-id");
o.current = _p;
_v.data("options",o);
// methods.options.current = _p;
methods.pageData(_v, _p);
})
})
},
forEach: function(_start,length,_current,curclass){
/**
* [s page elements]
* @type {String}
*/
var s = '';
for(var i = _start;i<length;i++){
if(i === parseInt(_current)){
s += methods.pageCurrent(i,curclass);
}else{
s += methods.pageBtn(i);
}
}
return s;
},
pageCurrent: function(_id,_class){
/**
* [class current page element calss]
* @type {String}
*/
return '<span class="'+_class+'" page-id="'+_id+'">'+_id+'</span>';
},
elliPsis: function(){
/**
* [class ellipses...]
* @type {String}
*/
return '<span class="els">...</span>';
},
pageBtn: function(_id){
/**
* [id page id]
* @type {String}
*/
return '<a page-id="'+_id+'">'+_id+'</a>';
},
addBtn: function(_property, _page, _count){
/**
* [disabled is it can click button]
* @type {Boolean}
*/
var disabled = '';
if(_count){
disabled = (_page === 0 || _page === _count-(-1)) ? 'disabled="true"':'';
}
return '<a class="'+_property+'" page-id="'+_page+'" '+disabled+'></a>';
},
setPrevNext: function(_o, _type){
/**
* [s string create prev or next buttons elements]
* @type {String}
*/
var s = '';
function prev(){
if(_o.btnShow){
s += methods.addBtn(_o.firstBtn, 1);
}
if(_o.btnBool){
s += methods.addBtn(_o.prevBtn, _o.current-1, _o.pageCount);
}
return s;
}
function next(){
if(_o.btnBool){
s += methods.addBtn(_o.nextBtn, _o.current-(-1), _o.pageCount);
}
if(_o.btnShow){
s += methods.addBtn(_o.lastBtn, _o.pageCount);
}
return s;
}
return _type==='prev'? prev(): next();
},
ajaxData: function(_url, _current){
/**
* [ajax get data and pagenumber]
* @param {Object} ){ var parms [ajax url,current page number]
* @return {[type]} [obj total rows]
*/
var _total = $.fn.zPager.defaults.totalData;
return (function(){
var parms = {'total':_total,'rows':[]};
$.ajax({
url: _url,
type: 'get',
data: {"page":_current},
dataType: 'json',
cache : false,
async : false,
success: function(data) {
if(data.total && (data.total!==0)){
parms['total'] = data.total;
parms['rows'] = data.rows;
}else{
$.pageError(3);
}
},
error: function(XMLHttpRequest,textStatus,errorThrown) {
var msg = '';
switch(XMLHttpRequest.readyState){
case 0:
msg = '（未初始化）还没有调用send()方法';
break;
case 1:
msg = '（载入）已调用send()方法，正在发送请求';
break;
case 2:
msg = '（载入完成）send()方法执行完成，已经接收到全部响应内容';
break;
case 3:
msg = '（交互）正在解析响应内容';
break;
case 4:
msg = '（完成）响应内容解析完成，可以在客户端调用了';
break;
}
console.log(textStatus+'：'+XMLHttpRequest.readyState+'-'+msg);
}
})
return parms;
})();
}
}
$.extend({
pageError:function(type){
/**
* [switch error type]
* @param {[type]} type [no this function]
* @return {[type]} [ajax error]
*/
switch(type){
case 1:
console.log('method'+method+'dose not exist on jQuery.zPager');
break;
case 2:
console.log('no ajax');
break;
case 3:
console.log('no data');
break;
default:
console.log('default error');
}
}
})
$.fn.extend({
zPager:function(method){
/**
* [if has this method]
* @param {[type]} methods[method] [apply this method]
* @return {[type]} [return property]
*/
if(methods[method]){
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}else if(typeof method === 'object' || !method){
return methods.pageInit.apply(this, arguments);
}else{
$.pageError(1);
}
}
})
$.fn.zPager.defaults = {
totalData: 10, //数据总条数
pageData: 10, //每页数据条数
pageCount: 0, //总页数
current: 1, //当前页码数
pageStep: 6, //当前可见最多页码个数
minPage: 0, //最小页码数，页码小于此数值则不显示上下分页按钮
active: 'current', //当前页码样式
prevBtn: 'pg-prev', //上一页按钮
nextBtn: 'pg-next', //下一页按钮
btnBool: true, //是否显示上一页下一页
firstBtn: 'pg-first', //第一页按钮
lastBtn: 'pg-last', //最后一页按钮
btnShow: true, //是否显示第一页和最后一页按钮
disabled: true, //按钮失效样式
ajaxSetData: true, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空
url: '', //ajax路由
htmlBox: '' //ajax数据写入容器
}
})(jQuery)
网友评论