基于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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
详解如何运行vue项目
Apr 15 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
基于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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
layui导航栏实现代码
2017/05/19 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python3匿名函数用法示例
2018/07/25 Python
python实现简单五子棋游戏
2019/06/18 Python
python 字典操作提取key,value的方法
2019/06/26 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
团队激励口号
2014/06/06 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL