利用JQuery寫一個簡單的異步分頁插件
更新時間：2016年03月07日 11:32:18 投稿：lijiao
這篇文章主要為大家詳細介紹了如何利用JQuery寫一個簡單的異步分頁插件，感興趣的小伙伴們可以參考一下
寫了一個Jquery異步分頁插件，拿出來分享一下，有不完善之處請指教。
以用戶分頁為例，先看一下效果，首先是第一頁：
下一頁或者點擊第二頁后：
點擊尾頁后：
效果還可以吧？來看看具體怎么用，首先后臺要有一個Page模型：
Page.java：
public class Page {
/**
* 當前頁號
*/
private int currPageNum = 1;
/**
* 總記錄數(shù)
*/
private int totalRowSize = 0;
/**
* 每頁記錄數(shù)
*/
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);
});
//構(gòu)建內(nèi)容
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的元素是作為分頁內(nèi)容展示容器，id為pageWidget的元素作為分頁控件展示容器。
然后提供了一個buildHtml()函數(shù)來具體構(gòu)建分頁內(nèi)容的。
使用異步分頁插件很簡單，只要這么調(diào)用：
$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
這是最簡化調(diào)用。還可以傳額外查詢參數(shù)，以及定制每頁顯示記錄數(shù)，具體使用方式見插件的具體介紹。
下面是asynPage插件內(nèi)容：
/*
* ===================AJAX異步分頁=================
*
* Copyright 2012 8 23, zhutx
*
* 假設id為pageWidget的div是你放置分頁控件的容器，則按如下形式調(diào)用：
* $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10});
* 參數(shù)說明：
* ------------Required-----------
* 參數(shù)一：請求URL
* 參數(shù)二：渲染結(jié)果集的頁面容器
* 參數(shù)三：負責渲染結(jié)果集到頁面的函數(shù)
* 參數(shù)四：總記錄數(shù)
* ------------Optional-----------
* 參數(shù)五(json對象)：
* 屬性pageRowSize:每頁記錄數(shù)(不配置，則默認為20)
* 屬性param:請求參數(shù)(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);
//開始獲取數(shù)據(jù)
fetchData(page.getCurrPageNum());
return this;
};
/* 將json轉(zhuǎn)換為請求參數(shù)字符串 */
var trunParamConfig2RequestParamStr = function(json){
var str = "";
for(key in json){
if(str==""){
str += key+"="+json[key];
}else{
str += "&"+key+"="+json[key];
}
}
return str;
};
/* 將配置參數(shù)拼接為請求字符串 */
var makeParamStr = function(param_json){
if(param_json==null){
return "";
}else{
return trunParamConfig2RequestParamStr(param_json);
}
};
/*
* 負責獲取后臺數(shù)據(jù)，獲取完畢后會觸發(fā)構(gòu)建分頁控件
*/
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);//觸發(fā)構(gòu)建分頁控件
},
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);
});
});
}
/* 構(gòu)建分頁控件的具體算法實現(xiàn) */
var buildPageWidget = function(page){
//構(gòu)建分頁控件前，先清理現(xiàn)有控件
settings.pageWidget.empty();
/* --------------- 下面開始進入真正的分頁控件構(gòu)建過程 -------------- */
/* --------------- 1.開始：構(gòu)建描述信息（如“共？頁，？條記錄”） ----------------- */
settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>頁 <span>"+page.getTotalRowSize()+"</span>條記錄</div>");
settings.pageWidget.append("<ul>");
/* --------------- 1.結(jié)束：構(gòu)建描述信息（如“共？頁，？條記錄”） ----------------- */
/* --------------- 2.開始：構(gòu)建“首頁”和“上一頁”控件 ------------- */
var currPageNum = Number(page.getCurrPageNum());
var totalPageNum = Number(page.getTotalPageNum());
if(currPageNum==1){
//如果你希望當前頁是第一頁的時候，也允許“首頁”和“上一頁”控件出現(xiàn)，則可以在這里進行補充
}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.結(jié)束：構(gòu)建“首頁”和“上一頁”控件 ------------- */
/* --------------- 3.開始：構(gòu)建分頁數(shù)字控件 -------------- */
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>");
}
}
//如果總頁數(shù)>=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，且總頁數(shù)與當前頁的差<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.結(jié)束：構(gòu)建分頁數(shù)字控件 -------------- */
/* --------------- 4.開始：構(gòu)建“下一頁”和“尾頁”控件 ------------- */
if(totalPageNum==currPageNum){
//如果你希望當前頁是最后一頁的時候，也允許“尾頁”和“下一頁”控件出現(xiàn)，則可以在這里進行補充
}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.結(jié)束：構(gòu)建“下一頁”和“尾頁”控件 ------------- */
//還要為控件綁定點擊事件
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();
};
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
您可能感興趣的文章:
- Java簡單實現(xiàn)SpringMVC+MyBatis分頁插件
- 自己動手寫的mybatis分頁插件(極其簡單好用)
- Mybatis全面分頁插件
- Ajax分頁插件Pagination從前臺jQuery到后端java總結(jié)
- Bootstrap Paginator分頁插件使用方法詳解
- Bootstrap Paginator分頁插件與ajax相結(jié)合實現(xiàn)動態(tài)無刷新分頁效果
- 基于Bootstrap3表格插件和分頁插件實例詳解
- jquery分頁插件jquery.pagination.js使用方法解析
- 基于jquery編寫分頁插件
- 詳解MVC如何使用開源分頁插件（shenniu.pager.js）
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應的頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
history歷史記錄插件可以幫助您回到您的JavaScript支持應用程序/前進按鈕和書簽。你可以存儲到應用程序狀態(tài)的網(wǎng)址散列和恢復它的狀態(tài)。2010-12-12
這篇文章主要介紹了jquery 自定義容器下雨效果可將下雨圖標改為其他,需要的朋友可以參考下2014-04-04
不知不覺10月都結(jié)束了，又要到年底了?？纯醋约荷洗螌戇^的文章后，已經(jīng)2個月都沒寫東西了2011-11-11
jQuery 自定義函數(shù)寫法分享，需要的朋友可以參考下2012-03-03
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應代碼
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應代碼,需要的朋友可以參考下。2010-10-10
jQuery is not defined 錯誤原因與解決方法小結(jié)
今天在測試一個程序的時候，明顯已經(jīng)加載了jquery但總是提示jQuery is not defined，經(jīng)過多方測試終于發(fā)現(xiàn)了問題，這里簡單總結(jié)一下,需要的朋友可以參考下2017-03-03
js原生態(tài)函數(shù)中使用jQuery中的 $(this)無效的解決方法
今天遇到一個聽郁悶的問題，正如title所說 js中原生態(tài)函數(shù)在jQuery 中使用 $(this) 被解析成undefined2011-05-05
本文給大家?guī)淼氖鞘褂胘avascript結(jié)合jQuery實現(xiàn)返回頂部的功能，并附上源碼，送給大家，需要的童鞋直接拿走吧2014-11-11
用jQuery將元素移除的基本方法常用的有三個，一個是remove()方法，一個是html()方法，一個是empty()方法2014-05-05