基于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 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
原生js开发的日历插件
Feb 04 Javascript
layui自定义工具栏的方法
Sep 19 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
FCKeditor的安装(PHP)
2007/01/13 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php输出xml属性的方法
2015/03/19 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python连接池实现示例程序
2013/11/26 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
python实现串口通信的示例代码
2020/02/10 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
竞选文艺委员演讲稿
2014/04/28 职场文书
培训研修方案
2014/06/06 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
基层党支部整改方案
2014/10/25 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
MySQL 数据表操作
2022/05/04 MySQL
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL