基于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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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数组删除元素示例
2014/03/21 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
读jQuery之五(取DOM元素)
2011/06/20 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python多线程用法实例详解
2015/01/15 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python实现串口通信的示例代码
2020/02/10 Python
python上selenium的弹框操作实现
2020/07/13 Python
python 如何调用远程接口
2020/09/11 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
党员批评与自我批评
2014/02/12 职场文书
商务助理求职信范文
2014/04/20 职场文书
环保倡议书50字
2014/05/15 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014年司机工作总结
2014/11/21 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python