基于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 相关文章推荐
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
js实现简单抽奖功能
Nov 24 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
党风廉政建设责任书
2014/04/14 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
承诺书格式范文
2014/06/03 职场文书
环保志愿者活动总结
2014/06/27 职场文书
交通违章检讨书
2014/09/21 职场文书
2014年科室工作总结
2014/11/20 职场文书
个人求职自荐信范文
2015/03/06 职场文书
庆祝教师节主持词
2015/07/06 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android