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

2024-10-14 11:02:28

写了一个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();
};

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

Mybatis全面分页插件

根据下面分页的思想,很容易实现Mybitas的多租户设计. 使用Mybatis提供的拦截器.对分页的SQL语句通过封装处理,处理成不同的分页sql. 本例已经实现了对Mysql和Oracle的分页功能.注意下面的引用包,不要引用错了. import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.
Java简单实现SpringMVC+MyBatis分页插件

1.封装分页Page类 package com.framework.common.page.impl; import java.io.Serializable; import com.framework.common.page.IPage; /** * * * */ public abstract class BasePage implements IPage, Serializable { /** * */ private static final long serialVersionUID
基于Bootstrap3表格插件和分页插件实例详解

首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据下面分页使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:
详解MVC如何使用开源分页插件（shenniu.pager.js）

最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只能ip访问,没有域名哈哈),其架构组成由:aspnetcore1.0.0+redis+ postgressql+TaskMainForm服务,这个项目在后期会开源出来供大家分享学习,站点地址点这里心声网:一者是目前正在做的后台管理框架一叶子,现目前刚好吧js分页插件shenniu.pager.js写
Bootstrap Paginator分页插件使用方法详解

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator
基于jquery编写分页插件

扩展JQuery很容易,作为一个练习,编写一个简单的分页插件,代码量不大,直接看代码好了: $.fn.mypagination = function(totalProperty,opts){ opts = $.extend({ perPage:10, callback:function(){ } },opts||{}); return this.each(function(){ function numPages(){ return Math.ceil(totalProperty/opts.pe
自己动手写的mybatis分页插件(极其简单好用)

刚开始项目,需要用到mybatis分页,网上看了很多插件,其实实现原理基本都大同小异,但是大部分都只给了代码,注释不全,所以参考了很多篇文章(每篇文章偷一点代码,评出来自己的,半抄袭),才自己模仿着写出了一个适合自己项目的分页插件,话不多说,直接上代码,相比大部分文章,注释算很完整了最重要的拦截器 package com.dnkx.interceptor; import java.sql.*; import java.util.HashMap; import java.util.Propert
Ajax分页插件Pagination从前台jQuery到后端java总结

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
利用JQuery写一个简单的异步分页插件

写了一个Jquery异步分页插件,拿出来分享一下,有不完善之处请指教. 以用户分页为例,先看一下效果,首先是第一页: 下一页或者点击第二页后: 点击尾页后: 效果还可以吧?来看看具体怎么用,首先后台要有一个Page模型: Page.java: public class Page { /** * 当前页号 */ private int currPageNum = 1; /** * 总记录数 */ private int totalRowSize = 0; /** * 每页记录数 */ privat
利用jQuery实现一个简单的表格上下翻页效果

前言本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&
利用c++写一个简单的推箱子小游戏

效果图相信各位都肯定完整这种推箱子的小游戏.游戏玩法很简单,那就是一个人把所有的箱子推动到对应的位置那就可以赢了. 那么我们接下来看看这个推箱子的游戏改怎么写 char map[10][10]= { {'#','#','#','#','#','#','#','#','#','#'}, {'#','#','#','#',' ',' ','!',' ',' ','#'}, {'#',' ',' ',' ',' ','o',' ',' ',' ','#'}, {'#',' ',' ',' ',' '
利用JavaScript写一个简单计算器

效果如下: 参考程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
利用jQuery设计一个简单的web音乐播放器的实例分享

一.准备数据库首先,我们设计MYSQL数据库如下: CREATE TABLE `songs` ( `song_id` int(11) NOT NULL AUTO_INCREMENT, `url` varchar(500) NOT NULL, `artist` varchar(250) NOT NULL, `title` varchar(250) NOT NULL, PRIMARY KEY (`song_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AU
C++利用链表写一个简单的栈实例详解

C++中其实有stack的模板类.功能更为强大. 自己写一个栈能让我们对栈这种数据结构更加熟悉.这个栈有一个不足之处就是里面存放的元素类型只能为int. #include <iostream> using namespace std; class Stack { private: struct Node { int data; Node *next; }; Node *head; Node *p; int length; public: Stack() { head = NULL; lengt
基于jquery的一个简单的脚本验证插件

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

目录目标命令行解析实现Ping 周期性发送其他验证总结这两年Rust火的一塌糊涂,甚至都烧到了前端,再不学习怕是要落伍了.最近翻了翻文档,写了个简单的Ping应用练练手,被所有权折腾的够呛,相比起Golang上手难度大很多,现将开发中的一些问题总结如下,所有源码见ring. 目标实现一个Ping,功能包含: 命令行解析实现ICMP协议,pnet包中已经包含了ICMP包定义,可以使用socket2库发送周期性发送Ping,通过多线程发送,再汇总结果监听退出信号命令行解析系
jquery实现一个简单的表单验证实例

表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个
详解用Node.js写一个简单的命令行工具

本文介绍了用Node.js写一个简单的命令行工具,分享给大家,具体如下: 操作系统需要为Linux 1. 目标在命令行输入自己写的命令,完成目标任务命令行要求全局有效命令行要求可以删除命令行作用,生成一个文件,显示当前的日期 2. 代码部分新建一个文件,命名为sherryFile 文件sherryFile的内容介绍: 生成一个文件,文件内容为当前日期和创建者 #! /usr/bin/env node console.log('command start'); const fs = r

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

相关推荐

随机推荐