在日常的工作中分页的使用的频率相对来说比较高，最近学习了jquery封装了一个用于数据显示分页的代码
利用jquery 的选择器 将标签的集合看成一个数组 然后利用数据量的多少来 显示内容
例如：
<ul id="lis">
??<li><h3></h3><span><img src=""></span></li>
?<li><h3></h3><span><img src=""></span></li>
?<li><h3></h3><span><img src=""></span></li>
?<li><h3></h3><span><img src=""></span></li>
?<li><h3></h3><span><img src=""></span></li>
?<li><h3></h3><span><img src=""></span></li>
</ul>
? 上一页 1 2 3...7 下一页
funciton printData(n,data) {
var curLi=?$("lis li").eq(n);0...n;?
curLi.find("h3").text?(data.imageName)????????? //("第n张图片");
curLi.find("img").attr("src",data.src).attr("alt",data.imageName)?? //?? ("第n张图片");
var pa=$("#photoList li")li的集合
?}
使用：
（将标签里面的属性或者数据替换）
function initPage(sendData) {
//对象数据
var option={
//当前页面的对象
curPageElement:$("#photoList li"),
//数据 遍历
dataPagingInfo:{
dataPaging:$("#imagePage"),? //页码数
pageSize:"20", //每页显示的数据大小
current:"1"??? //当前页
},
sendData:sendData,
url:"/admin/photo/action.do",
//回调方法
backMethods:{
//输出数据
printData:function(i,data) {
pa.eq(i).text(data.content);
?????? },
//数据 的长度
?????? dataLen:function(length) {
?????? $("#imageSum").text(length);
?????? }
?????? }
? }
//初始化参数
pageList.init(option);
//刷新当前页面
pageList.coreFlow();
}
一、pageList.js(分页时的数据交互)
// 减少不必要的 请求 进一步增强用户体验对 和 缓解服务器 压力
//?? 思路：
// 1、在对象后面添加 一个method保存页码
// 2、这个页码作为 缓存对象的标识符 每次检查这个标识符 确认是否存 缓存缓存过这个对象
//option中的参数说明
/***
* 前台页面 遍历思路
* 适合于分页遍历的数据
*?? 分析：
*??? 1、数据显示 只和? html的展现形式有关系? 与? html本身的构造无关
*??? 2、事件只和 html本身的构造有关系 和?? 数据的显示无关
*?????? 此种方式 完全脱离? 服务器编程语言的限制
* 此时html完全静态化通过apach转发不依赖于后台程序：
* 对于服务器来说只需要提供结构化的数据(json)
* 而客户端则通过js直接请求json数据 再将其填充到html代码中 在效果体现方面html代码只有show 和hide的体现形式
*
* 优点： 1、有利于 服务器集群扩展
* ? 2、缓解的数据的并发量
* ? 3、静态化的页面替代了传统的jsp 减少了jsp 到 class的这一过程 加快了服务器运行的速度
*
* 传统显示的分析：
*?????? 1、将数据显示和html代码混为一趟 造成html随数据的改变而重构
*?????? 2、重构也带来了事件的重复绑定
*
*
*
此js依赖于 jquery.js jquery.util1.1.js 用于数组遍历? 发送请求?? jquery.pageFoot.js 用于分页 (借鉴了别人的)
***/
var pageList={
//对象数据
option:{
//当前页面的数据
curDatas:"",
//当前页面的对象
curPageElement:"",
//数据 遍历
dataPagingInfo:{
dataPaging:"",
pageSize:"4",
current:"1",
count:"",
pgCount:"",
//是否启用缓存
isCache:"true"
},
sendData:"",
url:"",
//回调方法
backMethods:{
//输出数据
printData:"",
//没有数据是触发
dataLen:""
},
reqArg:{
//同步与否
async:false
}
},
//缓存对象
caches:{},
//在缓存中添加数据
addCachData:function(data) {
//添加一个属性缓存这个对象
data.curIndex=this.getCurPage();
this.caches.push(data);
},
//检查 数据是否存在于 之中 如果用则返回这个对象 反之 则返回空
checkCaches:function() {
var page=this.getCurPage();
//检查 数据是否缓存
var fObj=objectUtil.findByProperty(page,"curIndex",this.caches);
if(fObj==null) {
return null;
}
//重缓存中获取数据
this.option.curValues=fObj;
return fObj;
},
//将数据一次性添加到缓存
addCachAllData:function(caches) {
this.caches=caches;
},
//是否运行虚拟页面效果
isVirtual:function() {
return this.option.dataPagingInfo.virtual;
},
//设置默认的数据作为缓存效果
setDefCache:function(delData) {
this.option.curValues.datas=delData;
//默认情况计算缓存分页
if(!this.option.dataPagingInfo.isPage)
this.virtualCount();
},
setisVirtual:function(virtual) {
this.option.dataPagingInfo.virtual=virtual;
},
// 不需要请求数据 的分页效果
virtualCount:function() {
var pageSize = this.option.dataPagingInfo.pageSize;
var caches=new Array();
var datas=this.option.curValues.datas;
//根据数据的大小计算出分页大小
//1、计算数据的量
var count=datas.length;
this.option.curValues.total=count;
//2、计算分页数量
var pageCount=parseInt((count%pageSize==0)?count/pageSize:(count/pageSize)+1);
var n=0;
for(var i=0;i<pageCount;i++) {
var daryy=new Array();
var data={};
for(var j=0;j<pageSize;j++) {
if(datas[n]) {
daryy.push(datas[n++]);
}
}
data.datas=daryy;
data.curIndex=i+1;
data.total=count;
this.caches.push(data);
}
this.option.curValues=this.caches[0];
//开启缓存
this.setCaches=true;
this.option.dataPagingInfo.virtual=false;
},
//设置url
setUrl:function(ur) {
this.clearCache();
this.Option.url=ur;
},
//设置当前页码数 （当前第几页）
setCurrentPage:function(page) {
this.option.dataPagingInfo.current=page;
},
//设置当前页面大小
setPageSize:function(size) {
this.option.dataPagingInfo.pageSize=size;
},
//缓存开关
isCaches:function() {
return this.option.dataPagingInfo.isCache;
},
setCaches:function(isCache) {
this.option.dataPagingInfo.isCache=isCache;
},
setCurPageCaches:function(curValue) {
this.caches[this.getCurPage()-1]=curValue;
},
//设置当前遍历对象
setCurPageElement:function(obj) {
this.clearCache();
this.option.curPageElement=obj;
},
init:function(option) {
$.extend(this.option,option);
$.extend(this.option,this.option,this.backMethods);
//默认开启缓存
this.option.dataPagingInfo.isCache=true;
this.caches=new Array();
},
setSendData:function(sendData) {
this.clearCache();
this.option.sendData=sendData;
},
//获取当前的数据
getCurList:function() {
return this.option.curDatas;
},
//获取当前 显示的数组
getDatasList:function() {
return this.option.curValues.datas;
}
,
//复位分页
resetPage:function() {
this.option.dataPagingInfo.current=1;
},
//获取总数量
getCount:function() {
return this.option.dataPagingInfo.count;
},
//获取当前的总数量
getCurCount:function() {
return this.option.curDatas.length;
},
//请求数据
reqService
:function() {
//定义默认分页
this.option.dataPagingInfo.current=this.getCurPage()||1;
//定义默认分页大小
this.option.dataPagingInfo.pageSize=this.option.dataPagingInfo.pageSize||2;
//获取当前页码
this.option.sendData.page=this.getCurPage();
//设定每一页显示的数据
this.option.sendData.pageSize=this.option.dataPagingInfo.pageSize;
var curUrl=this.option.url;
var reqnew = new ReqNewDatas(); //jquery.util1.1.js中
reqnew.isAsync(this.option.reqArg.async);
if(reqnew.getDatas(curUrl,this.option.sendData)){
this.option.curValues = reqnew.curDatas;
return true;
}
return false;
},
//检查是否清空缓存
checkClear:function() {
if(!this.option.dataPagingInfo.oldPage||this.option.dataPagingInfo.oldPage==this.getCurPage()){
this.caches=new Array();
return true;
}
return false;
},
//清空缓存
clearCache:function() {
this.caches=new Array();
},
//回调显示
callShow
:function() {
this.option.dataPagingInfo.count=this.option.curValues.total;
this.option.curDatas=this.option.curValues.datas;
//数据的总长度
this.option.backMethods.dataLen(this.option.curValues.total,this);
//根据数据量显示或者隐藏标签
this.controlStyle(this.option.curValues.datas.length);
//记录上一次分页
this.option.dataPagingInfo.oldPage=this.getCurPage();
//显示数据量
objectUtil.iterElement(jQuery.proxy(this.option.backMethods.printData, this),this.option.curValues.datas);
//默认情况下计算分页
if(!this.option.dataPagingInfo.isPage) {
//计算分页
this.scrPage();
this.option.dataPagingInfo.dataPaging.show();
} else {
this.option.dataPagingInfo.dataPaging.hide();
}
if(typeof this.option.backMethods.finish=="function")
//所有遍历完成之后
this.option.backMethods.finish();
},
//核心控制 1、先检查缓存 2、根据是否缓存数据 而请求
coreFlow
:function() {
//检查是否清空缓存
this.checkClear();
if(this.checkCaches()==null) {
//请求数据
if(this.reqService()) {
//运行虚拟数据分页效果
if(this.isVirtual()) {
this.virtualCount();
}else
//检查是否将数据 缓存起来
if(this.option.dataPagingInfo.isCache) {
this.addCachData(this.option.curValues);
}
}
}
//回调
this.callShow();
},
controlStyle:function(curCount) {
this.hideStyle(curCount);
this.showStyle(curCount);
},
//数据显示效果的实现 隐藏没有数据的项
showStyle:function(curCount) {
if(curCount<this.option.dataPagingInfo.pageSize) {
for(var i=curCount;i<this.option.dataPagingInfo.pageSize;i++) {
this.option.curPageElement.eq(i).hide();
}
}
},
hideStyle:function(curCount) {
for(var i=0;i<curCount;i++) {
this.option.curPageElement.eq(i).show();
}
},
setFootOption:function(option) {
$.extend(this.option.dataPagingInfo,option);
},
//分页
scrPage
:function() {
var _this=this;
var displaynum=this.option.dataPagingInfo.displaynum;
if(!displaynum) displaynum=3;
var displaylastNum=this.option.dataPagingInfo.displaylastNum;
if(!displaylastNum) displaylastNum=1;
var css=this.option.dataPagingInfo.css;
if(!css) css="mj_pagefoot";
this.option.dataPagingInfo.dataPaging.pagefoot({
pagesize:this.option.dataPagingInfo.pageSize,//每页显示6条
count:this.option.dataPagingInfo.count,//总记录
current:this.option.dataPagingInfo.current,?? //当前页码
css:css,
displaynum:displaynum, //中间显示页码数
displaylastNum:displaylastNum, //最后显示的页码数
??? previous:" ",
??? next:" ",
paging:function(page) {
_this.option.dataPagingInfo.current=page;
_this.coreFlow();
},
getPgCount:function(pgCount) {
_this.option.pgCount=pgCount;
}
});
},
//获取当前页面
getCurPage:function() {
return this.option.dataPagingInfo.current;
},
//总页面数量
getPgCount:function() {
return this.option.pgCount;
}
}
?
?
?
?
?
jquery.utils.js封装的一个工具包
//对象工具操作类
?var objectUtil={
??//id 字段值 property字段值对应属性 datas集合
??findByProperty
:function(id,property,datas) {
???for(var i=0;i<datas.length;i++) {
????if(datas[i][property]==id) {
?????return datas[i];
????}
???}?
???return null;
??},
??
??//根据这个元素找到他所对于的下标值
??findSuffixByProperty:function(id,property,datas) {
???for(var i=0;i<datas.length;i++) {
????if(datas[i][property]==id) {
?????return i;
????}
???}?
???return null;
??},
??//遍历元素 fun遍历函数 datas数据集合
??iterElement
:function(fun,datas,args) {
???if(datas) {
????for(var i=0;i<datas.length;i++) {
?????if(!args) {
??????fun(i,datas[i]);
?????} else {
??????fun(i,datas[i],args);
?????}?
????}
???}
??},
??//根据字段类型的某个值 返回相应的集合 values="1,2,4,8";
??//
??????? //? ??var ab=[{id:1,text:"我扩大是否1"},{id:2,text:"我扩大是否2"},{id:2,text:"我扩大是否3"},{id:1,text:"我扩大是否4"}];
??????? //? ??var arry=objectUtil.findByPropertys("1,2","id",ab);
??????? //? ??for(var i=0;i<arry.length;i++) {
??????? //? ???var vs="";
??????? //? ???for(var j=0;j<arry[i].values.length;j++) {
??//????vs+=" id:"+arry[i].values[j].id+"? text:"+arry[i].values[j].text+",? ";????????? ????
??????? //? ???}
??????? //? ???alert(arry[i].typeId+"??? "+vs);
??????? //? ??}
??//
??// 按照类型排序 0,1
??findByPropertys:function(values,property,datas,isSort) {
???var vs=values.split(",");
???var arry=new Array();
???for(var i=0;i<vs.length;i++) {
????var data=new Object();
????data.typeId=vs[i];
????data.values=new Array();
????arry.push(data);
???}
???var sortArry="";
???if(isSort)
????sortArry=new Array();
????
???for(var j=0;j<arry.length;j++) {
????for(var i=0;i<datas.length;i++) {
?????if(datas[i][property]==parseInt(arry[j].typeId)) {
??????if(!isSort) {
???????arry[j].values.push(datas[i]);
??????} else {
???????sortArry.push(datas[i]);
??????}
?????}
????}
???}
???if(isSort)
????return sortArry;
???return arry;???
??}
?}
?
?var ArryHandle=function(option) {
??this.init(option);
?}?
?//对数组的操作
?ArryHandle.prototype={
??curArray:"",
??//idProperty唯一性标识符字段
??option:{
???idProperty:"",
???maxLen:"",
???index:0
??},
??init:function(option) {
???$.extend(this.option,option);
???if(typeof this.curArray!="Array") {
????this.curArray=new Array();
???}
??},
??//元素过长 返回1? 成功返回 0 有重复元素放回 2; cover表示是否覆盖元素默认不覆盖
??addElement:function(obj,cover) {
???if(this.getCurLen()>this.option.maxLen-1) {
????return 1;
???}
???//检查数组是否有重复的元素
???var curObj = objectUtil.findByProperty(obj[this.option.idProperty],this.option.idProperty,this.curArray);
???if(curObj!=null&&!cover) return 2;
????this.curArray.push(obj);
???return 0;
??},
??//获得当前数组的长度
??getCurLen:function() {
???return this.curArray.length;
??},
??//获取最后一个元素的索引值
??getLastIndex:function() {
???var len=this.getCurLen();
???return len-1;
??},
??//根据这个对象删除 一个元素
??delElement:function(obj,shiffix) {
???var index=this.findIndex(obj);
???if(index!=null) {
????this.shifArray(index,shiffix);
????return index;
???}
???return null;
??},
??shifArray:function(index,shiffix) {
???for(var i=index;i<this.curArray.length;i++) {
????if(this.curArray[i+1]) {
??????this.curArray[i]=this.curArray[i+1];
??????if($.isFunction(shiffix)) {
???????shiffix(this.option.pageArray.eq(i),this.option.pageArray.eq(i+1));
??????}
????}
???}
???this.curArray.pop();
??},
??//根据当前元素寻找它在数组中的索引
??findIndex:function(obj) {
???return objectUtil.findSuffixByProperty(obj[this.option.idProperty],this.option.idProperty,this.curArray);
??},
??//查找某个元素
??findByProeprty:function(id) {
??? return objectUtil.findByProperty(id,this.option.idProperty,this.curArray);
??}
?}
?
?var reqDatas={
??//当前的数据集合
??curDatas:"",
??type:"get",
??async:false,
??//获取数据
??setType:function(type) {
???this.type=type;
??},
??getDatas:function(ul,data) {
???ul+="?t="+Math.random()*10000;
???var datas =? $.ajax({
????url:ul
,
????data:data,?
????type:this.type,
???? async: this.async
???}).responseText;
???if(datas.length>0) {
????this.curDatas= jQuery.parseJSON(datas);
????return true;
???}
???return false;
??}
?}
?
?var ReqNewDatas=function() {}?
?ReqNewDatas
.prototype={
??//当前的数据集合
??curDatas:"",
??type:"get",
??async:false,
??//获取数据
??setType:function(type) {
???this.type=type;
??},
??isAsync:function(async) {
???this.async=async;
??},
??getDatas:function(ul,data) {
???ul+="?t="+Math.random();
???var datas =? $.ajax({
????url:ul
,
????data:data,?
????type:this.type,
???? async: this.async
???}).responseText;
???if(datas.length>0) {
????this.curDatas= jQuery.parseJSON(datas);
????return true;
???}
???return false;
??}
?}
?
/* 借鉴了别人的
******生成js分页脚******
****没剑(2008-03-05)****
修改日期：2008-3-12
添加两个参数：displaynum，displaylastNum可以自由定制显示的页码数量
参数：? pagesize:10? //每页显示的页码数
??????? ,count:0??????????????? //数据条数
??????? ,css:"mj_pagefoot"????? //分页脚css样式类
??????? ,current:1????????????? //当前页码
??,displaynum:7???//中间显示页码数
??,displaylastNum:5??//最后显示的页码数
??????? ,previous:"上一页"????? //上一页显示样式
??????? ,next:"下一页"????????? //下一页显示样式
??????? ,paging:null??????????? //分页事件触发时callback函数
???????
使用：
?$("div").pagefoot({
???? pagesize:10,
???? count:500,
???? css:"mj_pagefoot",
???? previous:"<",
???? next:">",
???? paging:function(page){
?????? alert("当前第"+page+"页");
????? }
?});
?以上代码为所有div加上分页脚代码
*/
jQuery.pagefoot =
{
??? //生成分页脚
??? create:function(_this,s){
???
???
???
??????? var pageCount=0;
??????
??????? //计算总页码
??????? pageCount=(s.count/s.pagesize<=0)?1:(parseInt(s.count/s.pagesize)+((s.count%s.pagesize>0)?1:0));
???????
???????
???????
???????
????????????? if(!$.pagefoot.getPgCount(pageCount,s.getPgCount))
??????????? ?return false;
?????? //检查当前页是否超过最大页
??????? s.current=(s.current>pageCount)?pageCount:s.current
???????
???????
??????? ?//扩展分页
??? ?if(s.extendPage) {
??? ???//下一页是否存在
??? ???var isNext;
??? ?????? //创建下一页
????????? if(s.current>=pageCount){
????????????? strPage+="<span class=\"disabled\">"+s.next+"</span>";
????????????? isNext=false;
????????? }else{
????????????? extendPage.prev.data("curNum",s.current+1);
????????????? isNext=true;
????????? }
???? ???
??? ???
??? ??
??? ?
??? ??return false;
??? ?}
??? ?
??? ?
??????? //循环生成页码
??????? var strPage="";
???????
??????? //创建上一页
??????? if(s.current<=1){
??????????? strPage+="<span class=\"prev-disabled page-bg\">"+s.previous+"</span>";
??????? }else{
??????????? strPage+="<a href=\""+(s.current-1)+"\">"+s.previous+"</a>";
??????? }
???????
???????
??????? //开始的页码
??????? var startP=1;
??????? startP=1
????var anyMore;//页码左右显示最大页码数
????anyMore=parseInt(s.displaynum/2)
??????? //结束的页码
??????? var endP=(s.current+anyMore)>pageCount?pageCount:s.current+anyMore;
??????? //可显示的码码数(剩N个用来显示最后N页的页码)
??????? var pCount=s.pagesize-s.displaylastNum;
??????? if(s.current>s.displaynum){//页码数太多时，则隐藏多余的页码
??????????? startP=s.current-anyMore;
??????????? for(i=1;i<=s.displaylastNum;i++){
??????????????????? strPage+="<a href=\""+i+"\">"+i+"</a>";
??????????? }
??????????? strPage+="...";
??????? }
??????? if(s.current+s.displaynum<=pageCount){//页码数太多时，则隐藏前面多余的页码
??????????? endP=s.current+anyMore;
??????? }else{
??????????? endP=pageCount;
??????? }
??????? for(i=startP;i<=endP;i++){
??????????? if(s.current==i){
??????????????? strPage+="<span class=\"current\">"+i+"</span>";
??????????? }else{
??????????????? strPage+="<a href=\""+i+"\">"+i+"</a>";
??????????? }
??????? }
??????? if(s.current+s.displaynum<=pageCount){//页码数太多时，则隐藏后面多余的页码
??????????? strPage+="...";
??????????? for(i=pageCount-s.displaylastNum+1;i<=pageCount;i++){
??????????????????? strPage+="<a href=\""+i+"\">"+i+"</a>";
??????????? }
??????? }
???????
???????
???????
??????? //创建下一页
??????? if(s.current>=pageCount){
??????????? strPage+="<span class=\"next-disabled page-bg\">"+s.next+"</span>";
??????? }else{
??????????? strPage+="<a href=\""+(s.current+1)+"\">"+s.next+"</a>";
??????? }
????
??????? $(_this).empty().append(strPage).find("a").click(function(){
??????????? //得到翻页的页码
??????????? var ln=this.href.lastIndexOf("/");
??????????? var href=this.href;
??????????? var page=parseInt(href.substring(ln+1,href.length));
??????????? s.current=page;
??????????? //外部取消翻页时...
??????????? if(!$.pagefoot.paging(page,s.paging))
??????????? ?return false;
??????????? $.pagefoot.create(_this,s);
??????????? return false;
??????? });
??????? return this;
??? },
??? paging:function(page,callback){
??????? if(callback){
??????????? if(callback(page)==false)
??????????? return false;
??????? }
??????? return true;
??? },
??? getPgCount:function(count,callback) {
??? ?? if(callback){
??? ?? ?
??????????? if(callback(count)==false)
??????????? return false;
??????? }
??????? return true;
??? }
}
//扩展绑定上下页
jQuery.fn.pagefoot= function(opt)
{
?/*参数定义*/
??? var setting = {pagesize:10? //每页显示的页码数
??????? ,count:0??????????????? //数据条数
??????? ,css:"mj_pagefoot"????? //分页脚css样式类
??????? ,current:1????????????? //当前页码
??,displaynum:3???//中间显示页码数
??,displaylastNum:1??//最后显示的页码数
??????? ,previous:"上一页"????? //上一页显示样式
??????? ,next:"下一页"????????? //下一页显示样式
??????? ,extendPage:null??//扩展分页
??????? ,paging:null
??????? ,getPgCount:null???????? //分页事件触发时callback函数
?};
?opt= opt || {}
?$.extend(setting, opt);
??? return this.each(function(){
??????? $(this).addClass(setting.css);
??????? $.pagefoot.create(this,setting);
??? });
}
?