利用JQuery写一个简单的异步分页插件_jquery

写了一个Jquery异步分页插件，拿出来分享一下，有不完善之处请指教。
以用户分页为例，先看一下效果，首先是第一页：

下一页或者点击第二页后：

点击尾页后：

效果还可以吧？来看看具体怎么用，首先后台要有一个Page模型：
Page.java：

public class Page { 

 /**
  * 当前页号
  */
 private int currPageNum = 1; 

 /**
  * 总记录数
  */
 private int totalRowSize = 0; 

 /**
  * 每页记录数
  */
 private int pageRowSize = 10; 

 public int getCurrPageNum() {
  return currPageNum;
 } 

 public void setCurrPageNum(int currPageNum) {
  this.currPageNum = currPageNum;
 } 

 public int getTotalPageNum() {
  int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1);
  return total;
 } 

 public int getTotalRowSize() {
  return totalRowSize;
 } 

 public void setTotalRowSize(int totalRowSize) {
  this.totalRowSize = totalRowSize;
 } 

 public int getPageRowSize() {
  return pageRowSize;
 } 

 public void setPageRowSize(int pageRowSize) {
  this.pageRowSize = pageRowSize;
 } 

 public int getFirstResult(){
  if(getCurrPageNum()<=0) return 0; 

  return getPageRowSize() * (getCurrPageNum() - 1);
 } 

 public int getMaxResult() {
  return this.getFirstResult()+this.getPageRowSize();
 } 

}

然后看list_user.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>异步分页</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <link href="../css/local.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="../js/asyn_page.js"></script>
 <script type="text/javascript">
 var totalRowSize = ${totalRowSize};
 $(document).ready(function(){
  $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
 }); 

 //构建内容
 function buildHtml(users){
  $.each(users,function(i,user){
   var tr = [
    '<tr>',
     '<td>',user.userId,'</td>',
     '<td>',user.username,'</td>',
     '<td>',user.sex,'</td>',
     '<td>',user.age,'</td>',
     '<td>',user.email,'</td>',
     '<td>',user.address,'</td>',
     '<td>',user.registerTime,'</td>',
     '<td></td>',
    '</tr>'
   ].join('');
   $("#tbody").append(tr);
  });
 }
 </script>
 </head>
 <body>
 <table>
  <thead>
  <tr>
   <th>ID</th>
   <th>用户名</th>
   <th>性别</th>
   <th>年龄</th>
   <th>Email</th>
   <th>地址</th>
   <th>注册时间</th>
   <th>操作</th>
  </tr>
  </thead>
  <tbody id="tbody"></tbody>
 </table>
 <div id="pageWidget" class="page"></div>
 </body>
</html>

 可以看到id为tbody的元素是作为分页内容展示容器，id为pageWidget的元素作为分页控件展示容器。
然后提供了一个buildHtml()函数来具体构建分页内容的。
使用异步分页插件很简单，只要这么调用：

$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);

 这是最简化调用。还可以传额外查询参数，以及定制每页显示记录数，具体使用方式见插件的具体介绍。
下面是asynPage插件内容：

/*
 * ===================AJAX异步分页=================
 *
 * Copyright 2012 8 23, zhutx
 *
 * 假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用：
 * $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10});
 * 参数说明：
 * ------------Required-----------
 * 参数一：请求URL
 * 参数二：渲染结果集的页面容器
 * 参数三：负责渲染结果集到页面的函数
 * 参数四：总记录数
 * ------------Optional-----------
 * 参数五(json对象)：
 * 属性pageRowSize:每页记录数(不配置，则默认为20)
 * 属性param:请求参数(json格式)
 */
(function($){
 var settings;
 var page;
 var paramStr; 

 $.fn.asynPage = function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){ 

  settings = $.extend({
   currPageNum:1,
   pageRowSize:20,
   param:null
  },callerSettings||{}); 

  settings.contentContainer = $(contentContainer);
  settings.url = url;
  settings.pageWidget = this;
  settings.totalRowSize = totalRowSize;
  settings.buildHtml_fun = buildHtml_fun; 

  page = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize); 

  paramStr = makeParamStr(settings.param); 

  //开始获取数据
  fetchData(page.getCurrPageNum()); 

  return this;
 }; 

 /* 将json转换为请求参数字符串 */
 var trunParamConfig2RequestParamStr = function(json){
  var str = "";
  for(key in json){
   if(str==""){
    str += key+"="+json[key];
   }else{
    str += "&"+key+"="+json[key];
   }
  }
  return str;
 }; 

 /* 将配置参数拼接为请求字符串 */
 var makeParamStr = function(param_json){
  if(param_json==null){
   return "";
  }else{
   return trunParamConfig2RequestParamStr(param_json);
  }
 }; 

 /*
  * 负责获取后台数据，获取完毕后会触发构建分页控件
  */
 var fetchData = function(currPageNum){ 

  page.setCurrPageNum(currPageNum);
  var firstResult = page.getFirstResult();
  var maxResult = page.getMaxResult();
  var pageRowSize = page.getPageRowSize(); 

  var data = null;
  if(paramStr){
   data = paramStr + "&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;
  }else{
   data = "page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;
  } 

  $.ajax({
   type :"POST",
   url : settings.url,
   data :data,
   success :function(datas){
    settings.contentContainer.empty();
    settings.buildHtml_fun(datas);
    buildPageWidget(page);//触发构建分页控件
   },
   error:function(xmlHttpRequest,textStatus,errorThrown){
    if(textStatus == "error"){
     var error = eval('('+xmlHttpRequest.responseText+')');
     alert("Sorry："+error.errorCode+"，"+error.message+"！");
    }
   }
  });
 }; 

 var trunTargetPage = function(pageNum){
  fetchData(pageNum);
 } 

 /* 为分页控件绑定事件 */
 var bindEvent = function(){
  var links = settings.pageWidget.find("a");
  $.each(links,function(i,link){
   var link = $(link);
   var pageNum = link.attr("pageNum");
   link.click(function(){
    trunTargetPage(pageNum);
   });
  });
 } 

 /* 构建分页控件的具体算法实现 */
 var buildPageWidget = function(page){ 

  //构建分页控件前，先清理现有控件
  settings.pageWidget.empty(); 

  /* --------------- 下面开始进入真正的分页控件构建过程 -------------- */ 

  /* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */
  settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>");
  settings.pageWidget.append("<ul>");
  /* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */ 

  /* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */
  var currPageNum = Number(page.getCurrPageNum());
  var totalPageNum = Number(page.getTotalPageNum()); 

  if(currPageNum==1){
   //如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充
  }else{
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>");
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>");
  }
  /* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */ 

  /* --------------- 3.开始：构建分页数字控件 -------------- */
  if(totalPageNum<10){
   for(var i=1;i<=totalPageNum;i++){
    if(i==currPageNum){
     settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
    }else{
     settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>");
    }
   }
  //如果总页数>=10
  }else{
   //如果当前页小于5，则显示1-9项，且记忆当前项
   if(currPageNum<5){
    for(var i =1;i<10;i++){
     if(i==currPageNum){
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
     }else{
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
     }
    }
   //如果当前页>=5，且总页数与当前页的差<4
   }else if(totalPageNum-currPageNum<4){
    for(var i=totalPageNum-8;i<=totalPageNum;i++){
     if(i==currPageNum){
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
     }else{
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
     }
    }
   //如果当前页>=5，则显示围绕当前页的9项，且记忆当前项
   }else{
    for(var i=currPageNum-4;i<currPageNum+5;i++){
     if(i==currPageNum){
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
     }else{
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>");
     }
    }
   }
  }
  /* --------------- 3.结束：构建分页数字控件 -------------- */ 

  /* --------------- 4.开始：构建“下一页”和“尾页”控件 ------------- */
  if(totalPageNum==currPageNum){
   //如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充
  }else{
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>");
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾页' class='last'>尾页</a></li>");
  }
  /* --------------- 4.结束：构建“下一页”和“尾页”控件 ------------- */ 

  //还要为控件绑定点击事件
  bindEvent();
 } 

})(jQuery); 

/*
 * Page类
 */
function Page(currPageNum,totalRowSize,pageRowSize){
 this.currPageNum = currPageNum;
 this.totalRowSize = totalRowSize;
 this.pageRowSize = pageRowSize;
}
Page.prototype.getCurrPageNum = function(){
 return this.currPageNum;
};
Page.prototype.setCurrPageNum = function(currPageNum){
 this.currPageNum = currPageNum;
};
Page.prototype.getTotalPageNum = function(){
 return (this.totalRowSize%this.pageRowSize==0)?(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1);
};
Page.prototype.getTotalRowSize = function(){
 return this.totalRowSize;
};
Page.prototype.setTotalRowSize = function(totalRowSize){
 this.totalRowSize = totalRowSize;
};
Page.prototype.getPageRowSize = function(){
 return this.pageRowSize;
};
Page.prototype.setPageRowSize = function(pageRowSize){
 this.pageRowSize = pageRowSize;
};
Page.prototype.getFirstResult = function(){
 if(this.getCurrPageNum()<=0) return 0;
 return this.getPageRowSize() * (this.getCurrPageNum() - 1);
};
Page.prototype.getMaxResult = function(){
 return this.getFirstResult() + this.getPageRowSize();
};

以上就是本文的全部内容，希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery分页插件
jquery ajax 异步分页、jquery 异步分页、jquery 异步分页插件、jquery简单分页代码、简单的jquery分页效果，以便于您获取更多的相关知识。

时间： 2024-10-29 10:48:37

利用JQuery写一个简单的异步分页插件_jquery的相关文章

基于jquery的一个简单的脚本验证插件_jquery

主要用到了jquery,以及自定义的一个属性wl_check,属性说明如下: 1.语法 [need:true,type:int,maxlen:15,minlen:2] 2.关键字 need:文本输入框的必填限制 regtype:文本输入框的正则表达式类别验证 minlen:文本输入框的最小输入长度 maxlen:文本输入框的最大输入长度 minval:数字型文本输入框的最值 maxval:数字型文本输入框的最值 notval:下拉框的必选设置 minselect:单复选框的最少选项数 maxse

利用泛型写一个简单的链表

--------<设计模式:基于C#的工程化实现及扩展>   利用泛型实现简单链表 namespace BangWorks.PractcalPattern.Generic { /// <summary> /// 泛型链表 /// </summary> public class GenericList<T> { /// <summary> /// 链表中的节点 /// </summary> public class Node { //一

利用jquery写的左右轮播图特效_jquery

最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的 将jquery框架的链接跟图片替换就可以看到效果了 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

分享一个自己写的简单的javascript分页组件

 这篇文章主要分享一个自己写的简单的javascript分页组件,效果十分不错,代码也很详尽,这里推荐给小伙伴们.     自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下:   代码如下: <ul class="pagination" id="pageDIV"> </ul> class="pagination" 给定了分页的样式,

利用jquery写的左右轮播图特效

 一个利用jquery写的左右轮播图,将jquery框架的链接跟图片替换就可以看到效果了,需要的朋友可以参考下 最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的    将jquery框架的链接跟图片替换就可以看到效果了    源代码如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

 本篇文章主要是对asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码进行了介绍,需要的朋友可以过来参考下,需要对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %> <!DOCTYPE html PUBLIC &quo

请大神帮忙写一个简单的聚类算法程序，在线等……用matlab或者java实现

问题描述 请大神帮忙写一个简单的聚类算法程序,在线等--用matlab或者java实现 Step1:将N个数据,按照从小到大的顺序排序 d1.d2,.....dn:其中d1时最小值,dn是最大值 聚类判别阈值计算方法为: Step2:让每个数据都作为一个类,那么有 {d1},{d2},{d3},.....{dn} Step3:计算聚类中心 假设共有P个类,那么1<=k<=P,其中r代表每个类中数据的个数,同时计算相邻两个聚类中心之间的距离,如下 Step4:找出相邻两个聚类中心的最小值 Ste

java中用集合写一个简单的登录功能。麻烦大家看一看

问题描述 java中用集合写一个简单的登录功能.麻烦大家看一看 //这是注册的方法 public static void reg(){ Collection id=new ArrayList();//账户 Collection passWord=new ArrayList();//密码 Scanner sc=new Scanner(System.in); System.out.println("请输入账号:"); id.add(sc.next()); System.out.printl

在vs2010中利用mfc写一个连连看游戏时各种资源窗口啥的等都报“未声明的标识符”问题

问题描述 在vs2010中利用mfc写一个连连看游戏时各种资源窗口啥的等都报"未声明的标识符"问题 10C 写这个连连看游戏刚开始导入各种资源文件改好ID后运行正常,但通过进一步的编程后不知道为什么开始报各种"未声明的标识符"bug(可能中途改了一些什么设置.....)现项目最近运行的log文件如下: 生成启动时间为 2016/5/26 17:37:08. 1>项目"C:UsersAliezdocumentsvisual studio 2010Pro