基于jQuery的js分页代码


Posted in Javascript onJune 10, 2010
function pagerBar(dataCount,pageSize,serverUrl,contentPlace,pagerbarPlace,callBack){ 
this.dataCount = dataCount; 
this.pageSize = pageSize; 
this.serverUrl = serverUrl; 
this.contentPlace = $("#"+contentPlace); 
this.pagerbarPlace = $("#"+pagerbarPlace); 
this.callBack = callBack; this.pageCount = 0; 
this.pageIndex = 1; 
this.curInfo = $("<span/>"); 
this.prePage = $("<span/>"); 
this.nextPage = $("<span/>"); 
this.init(); 
} 
pagerBar.prototype = { 
init : function(){ 
this.getPageCount(); 
this.initLink(); 
this.showBarInfo(); 
if(this.pageCount>0){ 
this.setLink(1); 
} 
}, 
getPageCount : function(){ 
this.pageCount = parseInt(this.dataCount / this.pageSize); 
if(this.dataCount % this.pageSize !=0){ 
this.pageCount++; 
} 
}, 
initLink : function(){ 
var self = this; 
this.prePage = $("<span/>").html("上一页").addClass("pageLink"); 
this.prePage.click(function(){ 
self.setLink(self.pageIndex-1); 
}); 
this.nextPage = $("<span/>").html("下一页").addClass("pageLink"); 
this.nextPage.click(function(){ 
self.setLink(self.pageIndex+1); 
}); 
this.pagerbarPlace.append(this.curInfo).append(this.prePage).append(this.nextPage); 
}, 
showBarInfo : function(){ 
this.prePage.hide(); 
this.nextPage.hide(); 
if(this.pageCount==0){ 
this.curInfo.html("暂时没有信息!"); 
} 
else if(this.pageCount==1){ 
this.curInfo.html("1/1"); 
} 
else{ 
this.curInfo.html(this.pageCount + "/" + this.pageIndex); 
} 
}, 
setLink : function(i){ 
var self = this; 
$.ajax({ 
url:self.serverUrl, 
type:"get", 
data:{pageSize:self.pageSize,pageIndex:i}, 
cache:false, 
error:function(){ 
alert("数据加载失败!"); 
}, 
success:function(htmlData){ 
self.contentPlace.html(htmlData); 
if(self.pageCount==1){ 
self.prePage.hide(); 
self.nextPage.hide(); 
}else{ 
if(i==1){ 
self.prePage.hide(); 
self.nextPage.show(); 
}else if(i==self.pageCount){ 
self.prePage.show(); 
self.nextPage.hide(); 
}else{ 
self.prePage.show(); 
self.nextPage.show(); 
} 
} 
self.pageIndex = i; 
self.curInfo.html(self.pageCount+"/"+self.pageIndex); 
if(self.callBack){ 
self.callBack(); 
} 
} 
}); 
}, 
changeServerUrl : function(dataCount,serverUrl){ 
this.dataCount = dataCount; 
this.serverUrl = serverUrl; 
this.pageIndex=1; 
this.getPageCount(); 
this.showBarInfo(); 
this.contentPlace.html(""); 
if(this.pageCount>0){ 
this.setLink(1); 
} 
}, 
dataCountDec : function(){ 
this.dataCount--; 
this.getPageCount(); 
if(this.pageCount<this.pageIndex){ 
this.pageIndex = this.pageCount; 
} 
if(this.pageIndex>0){ 
this.setLink(this.pageIndex); 
} 
this.showBarInfo(); 
} 
}
Javascript 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
Jquery解析json数据详解
Dec 26 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
javascript基础知识讲解
Jan 11 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
js判断节假日实例代码
Dec 27 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 #Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 #Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 #Javascript
jQuery-ui中自动完成实现方法
Jun 10 #Javascript
Array.prototype.slice 使用扩展
Jun 09 #Javascript
Confirmer JQuery确认对话框组件
Jun 09 #Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 #Javascript
You might like
php的控制语句
2006/10/09 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
jquery常用操作小结
2014/07/21 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Java及python正则表达式详解
2017/12/27 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python 元类实例解析
2018/04/04 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
postman和python mock测试过程图解
2020/02/22 Python
Django websocket原理及功能实现代码
2020/11/14 Python
打架检讨书2000字
2014/02/22 职场文书
外国人聘用意向书
2014/04/01 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
公司停电通知
2015/04/15 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
2016年母亲节寄语
2015/12/04 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python