基于jQuery的js分页代码

 更新时间:2010年06月10日 23:51:07   作者:  
jquery的分页代码,是结合数据库实现的, 这里只给出核心jquery代码。其它的大家可以发挥下。
复制代码 代码如下:

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();
}
}

相关文章

  • 40个新鲜出炉的jQuery 插件和免费教程[上]

    40个新鲜出炉的jQuery 插件和免费教程[上]

    作为最流行的 JavaScript 库,jQuery 拥有丰富的插件,能够帮助开发者简单快速的实现各种功能
    2012-07-07
  • jQuery操作表单常用控件方法小结

    jQuery操作表单常用控件方法小结

    这篇文章主要介绍了jQuery操作表单常用控件方法,实例总结了jQuery针对常用表单控件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jQuery实现表格行上下移动和置顶效果

    jQuery实现表格行上下移动和置顶效果

    本文给大家分享的是一款由jQuery实现的表格行上下移动以及置顶效果的代码,非常的简单实用,这里给出了核心代码,有需要的小伙伴可以参考下。
    2015-06-06
  • jqNext能替代jQuery吗

    jqNext能替代jQuery吗

    随着前端的发展和浏览器的升级,jQuery也开始有些缺陷,其中最主要的就是在处理大量数据时会出现性能问题,而为了解决这个问题,我们可以使用jqNext,这是jQuery的一个轻量级替代品,尽管它并不能完全取代jQuery,但在一些场景下使用起来是十分便利的
    2023-09-09
  • Jquery Easyui验证组件ValidateBox使用详解(20)

    Jquery Easyui验证组件ValidateBox使用详解(20)

    这篇文章主要为大家详细介绍了Jquery Easyui自定义下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery实现的解析本地 XML 文档操作示例

    jQuery实现的解析本地 XML 文档操作示例

    这篇文章主要介绍了jQuery实现的解析本地 XML 文档操作,结合实例形式分析了jQuery针对本地 XML 文档的解析及ajax交互相关操作技巧,需要的朋友可以参考下
    2020-04-04
  • jQuery使用drag效果实现自由拖拽div

    jQuery使用drag效果实现自由拖拽div

    本文给大家分享一款jquery实现的完美拖拽(拖动div层效果),如果你正在找这类效果不妨进入参考一下。
    2015-06-06
  • Jquery中$.post和$.ajax的用法小结

    Jquery中$.post和$.ajax的用法小结

    本节重点讲的是jquery中调用ajax的4种方法中最常用的:$.post、和$ajax。如果读者没有javascript和jquery的知识,或者没有ajax的概念,那么请先去问问度娘,再来读本文。
    2015-04-04
  • jQuery组件easyui对话框实现代码

    jQuery组件easyui对话框实现代码

    这篇文章主要为大家详细介绍了jQuery组件easyui对话框实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jQuery实现当按下回车键时绑定点击事件

    jQuery实现当按下回车键时绑定点击事件

    当按下回车键时,绑定按钮点击事件,本文为大家介绍下jQuery回车键绑定点击事件的具体实现
    2014-01-01

最新评论