jquery分页时 数据与实际分离

jquery分页时 数据与现实分离

在日常的工作中分页的使用的频率相对来说比较高，最近学习了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:" &nbsp; ",
    next:" &nbsp; ",
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);
    });
}