基于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对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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
深入apache host的配置详解
2013/06/09 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
尽职尽责村干部自我鉴定
2014/01/23 职场文书
寒假家长评语大全
2014/04/16 职场文书
劳资协议书范本
2014/04/23 职场文书
民族学专业求职信
2014/07/28 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
婚宴致辞
2015/07/28 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书