热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

基于jQuery的js分页代码

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 = $("");
this.prePage = $("");
this.nextPage = $("");
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 = $("").html("上一页").addClass("pageLink");
this.prePage.click(function(){
self.setLink(self.pageIndex-1);
});
this.nextPage = $("").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.pageCountthis.pageIndex = this.pageCount;
}
if(this.pageIndex>0){
this.setLink(this.pageIndex);
}
this.showBarInfo();
}
}

推荐阅读
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 工作经验谈之-让百度地图API调用数据库内容 及详解
    这段时间,所在项目中要用到的一个模块,就是让数据库中的内容在百度地图上展现出来,如经纬度。主要实现以下几点功能:1.读取数据库中的经纬度值在百度上标注出来。2.点击标注弹出对应信息。3 ... [详细]
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • 查询单个functionquery(id){$.ajax({url:smallproductServlet,async:true,type:POST,data:{typ ... [详细]
  • 关于extjs开发实战pdf的信息
    本文目录一览:1、extjs实用开发指南2、本 ... [详细]
  • jqueryajax怎么通过header传递参数?
    /这个是全局的ajax请求头设置,所有的ajax请求都会加上这个请求头 ... [详细]
author-avatar
爱在西元前2502938591
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有