jquery pager 访问 java_jQuery pager.js 插件动态分页功能实例分析

本文实例讲述了jQuery pager.js 插件动态分页功能。分享给大家供大家参考，具体如下：

pager.js 代码

function Page(opt){

var set = $.extend({num:null,startnum:1,elem:null,callback:null},opt||{});

if(set.startnum>set.num||set.startnum<1){

set.startnum = 1;

}

var n = 0,htm = '';

var clickpages = {

elem:set.elem,

num:set.num,

callback:set.callback,

init:function(){

this.elem.next('div.pageJump').children('.button').unbind('click')

this.JumpPages();

this.elem.children('li').click(function () {

var txt = $(this).children('a').text();

var page = '', ele = null;

var page1 = parseInt(clickpages.elem.children('li.active').attr('page'));

if (isNaN(parseInt(txt))) {

switch (txt) {

case '下一页':

if (page1 == clickpages.num) {

return;

}

if (page1 >= (clickpages.num - 2) || clickpages.num <= 6 || page1 < 3) {

ele = clickpages.elem.children('li.active').next();

} else {

clickpages.newPages('next', page1 + 1);

ele = clickpages.elem.children('li.active');

}

break;

case '上一页':

if (page1 == '1') {

return;

}

if (page1 >= (clickpages.num - 1) || page1 <= 3 || clickpages.num <= 6) {

ele = clickpages.elem.children('li.active').prev();

} else {

clickpages.newPages('prev', page1 - 1);

ele = clickpages.elem.children('li.active');

}

break;

case '首页':

if (page1 == '1') {

return;

}

if (clickpages.num > 6) {

clickpages.newPages('首页', 1);

}

ele = clickpages.elem.children('li[page=1]');

break;

case '尾页':

if (page1 == clickpages.num) {

return;

}

if (clickpages.num > 6) {

clickpages.newPages('尾页', clickpages.num);

}

ele = clickpages.elem.children('li[page=' + clickpages.num + ']');

break;

case '...':

return;

}

} else {

// if ((parseInt(txt) >= (clickpages.num - 3) || parseInt(txt) <= 3) && clickpages.num > 6) {

// clickpages.newPages('jump', parseInt(txt));

// }

// ele = $(this);

// }

// page = clickpages.actPages(ele);

// if (page != '' && page != page1) {

// if (clickpages.callback){

// clickpages.callback(parseInt(page));

// }

var i = parseInt(txt);

if(isNaN(i)||(i<=0)||i>clickpages.num){

return;

}else if(clickpages.num>6){

clickpages.newPages('jump',i);

}else{

var ele = clickpages.elem.children('li[page='+i+']');

clickpages.actPages(ele);

if (clickpages.callback){

clickpages.callback(i);

}

return;

}

if (clickpages.callback){

clickpages.callback(i);

}

}

});

},

//active

actPages:function (ele) {

ele.addClass('active').siblings().removeClass('active');

return clickpages.elem.children('li.active').text();

},

JumpPages:function () {

this.elem.next('div.pageJump').children('.button').click(function(){

var i = parseInt($(this).siblings('input').val());

if(isNaN(i)||(i<=0)||i>clickpages.num){

return;

}else if(clickpages.num>6){

clickpages.newPages('jump',i);

}else{

var ele = clickpages.elem.children('li[page='+i+']');

clickpages.actPages(ele);

if (clickpages.callback){

clickpages.callback(i);

}

return;

}

if (clickpages.callback){

clickpages.callback(i);

}

})

},

//newpages

newPages:function (type, i) {

var html = "",htmlLeft="",htmlRight="",htmlC="";

var HL = '

...';

html = '

首页'

for (var n = 0;n<5;n++){

htmlC += '

'+(i+n-1)+'';

htmlLeft += '

'+(n+2)+'';

htmlRight += '

'+(set.num+n-5)+'';

}

switch (type) {

case "next":

if(i<=4){

html+='

1'+htmlLeft+HL+' '+set.num+'';

}else if(i>=(set.num-3)){

html+='

1'+HL+htmlRight+' '+set.num+'';

}else{

html += '

1'+HL+htmlC+HL+' '+set.num+'';

}

break;

case "prev":

if(i<=4){

html+='

1'+htmlLeft+HL+' '+set.num+'';

}else if(i>=(set.num-3)){

html+='

1'+HL+htmlRight+' '+set.num+'';

}else{

html += '

1'+HL+htmlC+HL+' '+set.num+'';

}

break;

case "首页" :

html+='

1'+htmlLeft+HL+' '+set.num+'';

break;

case "尾页" :

html+='

1'+HL+htmlRight+' '+set.num+'';

break;

case "jump" :

if(i<=4){

if(i==1){

html+='

1'+htmlLeft+HL+' '+set.num+'';

}else{

html+='

1'+htmlLeft+HL+' '+set.num+'';

}

}else if((i>=set.num-3)&&(set.num>=7)){

if(i==set.num){

html+='

1'+HL+htmlRight+' '+set.num+'';

}else{

html+='

1'+HL+htmlRight+' '+set.num+'';

}

}else{

html += '

1'+HL+htmlC+HL+' '+set.num+'';

}

}

html += '

尾页';

if (this.num > 5 || this.num < 3) {

set.elem.html(html);

clickpages.init({num:set.num,elem:set.elem,callback:set.callback});

}

}

}

if(set.num<=1){

$(".pagination").html('');

return;

}else if(parseInt(set.num)<=6){

n = parseInt(set.num);

var html='

首页';

for(var i=1;i<=n;i++){

if(i==set.startnum){

html+='

'+i+'';

}else{

html+='

'+i+'';

}

}

html +='

尾页';

set.elem.html(html);

clickpages.init();

}else{

clickpages.newPages("jump",set.startnum)

}

}

上面是 pager.js部分

html部分

前往

页

GO

Page({

num:{$page_mum}, //页码数

startnum:{$page}, //当前页面有列表切换，在列表切换的时候修改数字，跳转到当前页

elem:$('#page1'), //指定的元素

callback:function(n){ //回调函数

// 在这里请求当前跳转需要用到的数据

// alert('跳转到第'+n+'页，请求此页数据，此页有列表切换');

window.location.href='id=xigua_re:system_msg&op=private_msglist&page='+n;

}

});

// 数据列表的循环获取

$('.userArticleType li').on('click',function () {

$('.userArticleType li').removeClass('choose');

$(this).addClass('choose')

})

希望本文所述对大家jQuery程序设计有所帮助。