在日常的工作中分页的使用的频率相对来说比较高,最近学习了jquery封装了一个用于数据显示分页的代码
利用jquery 的选择器 将标签的集合看成一个数组 然后利用数据量的多少来 显示内容
例如:
上一页 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
var data={};
for(var j=0;j
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
}
}
},
hideStyle:function(curCount) {
for(var i=0;i
}
},
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
return datas[i];
}
}
return null;
},
//根据这个元素找到他所对于的下标值
findSuffixByProperty:function(id,property,datas) {
for(var i=0;i
return i;
}
}
return null;
},
//遍历元素 fun遍历函数 datas数据集合
iterElement :function(fun,datas,args) {
if(datas) {
for(var i=0;i
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
// for(var j=0;j
// }
// 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
data.typeId=vs[i];
data.values=new Array();
arry.push(data);
}
var sortArry="";
if(isSort)
sortArry=new Array();
for(var j=0;j
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[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+=""+s.next+"";
isNext=false;
}else{
extendPage.prev.data("curNum",s.current+1);
isNext=true;
}
return false;
}
//循环生成页码
var strPage="";
//创建上一页
if(s.current<=1){
strPage+=""+s.previous+"";
}else{
strPage+=""+s.previous+"";
}
//开始的页码
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+=""+i+"";
}
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+=""+i+"";
}else{
strPage+=""+i+"";
}
}
if(s.current+s.displaynum<=pageCount){//页码数太多时,则隐藏后面多余的页码
strPage+="...";
for(i=pageCount-s.displaylastNum+1;i<=pageCount;i++){
strPage+=""+i+"";
}
}
//创建下一页
if(s.current>=pageCount){
strPage+=" ";
}else{
strPage+=""+s.next+"";
}
$(_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);
});
}