zhutianxiang
- 浏览: 13252 次
- 性别:
- 来自: 杭州
-
文章分类
最新评论
写了一个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编写一个简单的异步分页插件，可以为Web应用提供便捷的分页解决方案。 ### 知识点一：JQuery与异步分页 JQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历和操作、事件处理、动画...
本项目涉及的是一个自定义的 jQuery 分页插件，用于实现数据的分页展示，提高用户体验，特别是处理大量数据时。下面将详细介绍这三个技术以及分页插件的相关知识点。 **HTML（HyperText Markup Language）** 是网页...
`jQuery Pagination Plugin`是针对jQuery设计的一个Ajax分页插件，用于实现高效且用户友好的分页功能。 ### jQuery分页插件的基本概念 1. **Ajax**：异步JavaScript和XML，允许页面与服务器进行通信，更新部分页面...
jQuery AJAX分页插件正是为了解决这个问题，通过异步请求从服务器获取指定页的数据，然后动态插入到页面中。 `ajaxpage`标签暗示了我们可能会讨论一个名为`AjaxPage`的特定插件。虽然具体插件细节未给出，但一般而...
jQuery Pagination是一款广泛应用于网页开发中的分页插件，它能够帮助开发者轻松地在大量数据中实现页面间的导航，提升用户体验。这款插件以其简洁的API、丰富的自定义选项以及良好的浏览器兼容性，深受前端开发者的...
首先，我们需要选择一个适合的jQuery分页插件。有许多开源的选项可供选择，例如jQuery Pagination Plugin、jQuery UI Paginator、Bootstrap-Pagination等。这里我们以jQuery Pagination Plugin为例，这是一个简单...
jQuery Pagination 是一个基于jQuery的轻量级分页插件，它可以方便地为列表添加分页功能。该插件支持自定义每页显示的条目数量、跳转到指定页面等功能，并且提供了丰富的回调函数用于处理数据加载等操作。 #### 二...
jQuery 分页插件是网页开发中的重要工具，它能够帮助开发者轻松实现数据的分页显示，提高用户体验，尤其是在处理大量数据时。这个插件通常包括各种样式和交互效果，使得分页不仅实用，而且美观。在本教程中，我们将...
**jQuery分页插件pagination.js** 是一个广泛应用于网页数据分页的JavaScript库，它基于强大的jQuery框架构建，为开发者提供了高效、灵活的分页解决方案。分页是Web应用程序中常见的功能，特别是在处理大量数据时，...
在这个"jQuery表格数据分页插件代码"中，我们可以看到一个完整的实现，它允许用户按需加载和浏览数据，优化了用户体验。 1. **jQuery基础**：jQuery是一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、...
这里我们主要讨论基于jQuery的无刷新异步分页插件。 jQuery是一款广泛使用的JavaScript库，简化了DOM操作、事件处理和Ajax交互等任务。在分页场景中，jQuery插件可以帮助开发者轻松实现动态加载内容，用户只需要...
**jQuery Table 分页插件详解** 在Web开发中，数据展示是常见的需求，尤其是在处理大量数据时，分页成为提高用户体验的重要手段。jQuery Table分页插件为开发者提供了便捷的解决方案，它允许用户轻松地在表格中实现...
JQuery分页插件是解决这个问题的一种高效方案，它能够帮助开发者轻松地实现动态加载和分页显示数据，提高用户体验。本篇将详细介绍这款简单轻巧的Jquery分页插件，并探讨其核心功能和应用场景。 Jquery分页插件是...
本教程将深入讲解如何利用jQuery实现一个带分页的动态数据表格插件。 首先，我们需要理解jQuery的核心概念。jQuery通过提供易用的API，使得JavaScript代码更简洁、更高效。例如，`$(selector)`用于选取DOM元素，`....
总之，创建一个基于jQuery的分页插件涉及到前端开发的多个方面，包括DOM操作、事件处理、状态管理、样式设计和插件化编程。通过实践和理解这些知识点，开发者可以提高在Web应用开发中的技能和效率。
"jQuery封装分页插件.rar"提供的就是一个用jQuery实现的分页功能插件。 这个插件可能包含以下核心知识点： 1. **jQuery基础**：了解jQuery的基本语法，如选择器（ID选择器、类选择器、属性选择器等）、DOM操作（`$...
本主题聚焦于一个特定的应用场景：使用jQuery扩展插件实现图片的异步分页浏览。这种技术在现代网页设计中十分常见，特别是在图片展示类网站或社交媒体平台，能够有效地提高用户体验，减少页面加载时间。 首先，我们...
"jQuery-pagination_分页插件"就是这样一个工具，它能够帮助开发者轻松地实现Ajax分页，使得页面加载更为流畅，同时也提供了美观的界面设计。 ### 1. jQuery与Ajax jQuery简化了JavaScript中的DOM操作、事件处理和...
**jQuery Ajax分页插件.Net示例** 在Web开发中，分页是一种常见的用户界面功能，用于处理大量数据。jQuery是一个流行的JavaScript库，它提供了一系列API来简化DOM操作、事件处理以及与服务器的异步通信。jQuery ...
本文将深入探讨“jQuery动态表格数据分页插件”，这款插件能够帮助开发者轻松实现动态表格数据的分页显示，同时支持自定义设置分页参数，以提高网页的性能和用户交互性。 首先，jQuery是一个广泛使用的JavaScript库...