js分页

1.构建json的结构 2.分页最基本的解析 1.构建json的结构 A.json格式(最基本) obj:{}-->多个属性 Array:[] 例子: 星将库 82个 [ { id:1, imgUrl:xx, Attr:xxx, name:xx, .... }, { id:2, imgUrl:xx, Attr:xxx, name:xx, .... }, ..... ] { "pet1": { }, "pet2": { }, .... } B.JSON对象转字符串[前端传给后台] JSON.stringify(obj) 答题: 100固定单选 radio--> class="radioclass radio1" flag="1" class="radioclass radio2" flag="2" class="radioclass radio3" flag="3" $(".radioclass").click(function(){ var flag=$(this).attr("flag"); $(this).hide(); $("radio"+(flag+1)).show(); }) var obj={}; obj.no1="A"; obj.no2="B"; 字符串转JSON对象[后台传给前端] JSON.parse(str) 使用情形:ajax请求的过来的数据，success或者error 2.分页内容的获取 json对象来自后台或者写死的数据 1.JSON.parse(str) 2.分页就是分配对应部分的数据 3.逻辑实现 /** data:数据来源，json对象,Array(假设) pageSize:单页的数目 pageNo:第几页 **/ function getMyPage(data,pageSize,pageNo){ var obj={ pageNo:pageNo, isNext:false, isFirst:false, isFinal:false, pageSize:pageSize, totalSize:0, pageData:[] }; //处理逻辑 //总页数 var len=Math.ceil(data.length/pageSize); //isFirst获取 //if(pageNo==1){ // obj.isFirst=true; //}else{ // obj.isFirst=false; //} //isFirst获取 obj.isFirst=(pageNo==1)?true:false; //isFinal获取 obj.isFinal=(pageNo==len)?true:false; //isNext获取 obj.isNext=(pageNo<len)?true:false; //totalSize获取 obj.totalSize=len; //pageData获取 //思路:只有不是最后一页，其他全部取满 //变量的数组 var arr=[]; if(pageNo<len){ //不是最后一页，取满的 for(var i=(pageNo-1)*pageSize;i<pageNo*pageSize;i++){ arr.push(data[i]); } }else{ //最后一页，取剩余 for(var i=(pageNo-1)*pageSize;i<data.length;i++){ arr.push(data[i]); } } obj.pageData=arr; return obj; } var bigObj=["1","2","3","4","5","6","7","8","9","10","11"]; getMyPage(bigObj,3,2); /** pageSize=3 total=11 totalSize=4 No1: 0-2 No2: 3-5 No3: 6-8 for(var i=(pageNo-1)*pageSize;i<pageNo*pageSize;i++){ } 0-2 3-5 6-8 9-10 1 2 3 4 5 6 7 8 9 10 11 **/

//1.tab切换 $("#tab .hd span").click(function(){ $(this).addClass('cur').siblings('span').removeClass('cur'); $(".bd .bzbox").eq($(this).index()).addClass('cur').siblings('.bzbox').removeClass('cur'); //1.tab切换就需要锁定json的哪个区域部分，也锁定默认index第一页 //index的赋值[默认第一页：index=1] $("#bdBDivBox").attr("index","1"); //flag的赋值，由对应的cur进行决定的 //先取cur对应的flag传给对应的ul上的flag值 //view or img var flag=$(this).attr("flag"); $("#bdBDivBox").attr("flag",flag); //bzbox究竟哪个是cur的显示:加cur与去cur处理 //就是id选择器:bzbox-view bzbox-img $("#bzbox-"+flag).addClass('cur').siblings('div').removeClass('cur'); //tab与bzbox都正常显示了，则接下来是对bzbox的数据填充 getStrtoAppendLis(flag,1); }) //5.初始化的时候我们先显示视频的区域显示 //再次证明，调用方法的后面，此段代码是想调用tab切换的方法 $($(".spanArea")[0]).click(); //4.添加换一批的操作的事件 /** * 说明: * 换一批就是下一页，但是这里跟下一页不一样的是，到最后一页的时候，这样又要把对应的pageNo=1，这样才能源源不断的循环换一批 * 思路: * 当点击对应的 <div class="changes-btn" > * 然后 获取的是<div class="bd" index="1" flag="view" id="bdBDivBox">这里的index 与flag值 * 然后 取index+1 */ $(".changes-btn").click(function(){ //拿到flag值-->cur值--->view or img var flag=$("#bdBDivBox").attr("flag"); //index值 var index=parseInt($("#bdBDivBox").attr("index")); //拿到index+1页内容，再append上去.listData是getMyPage方法拿的 var listData=getStrtoAppendLis(flag,index+1); //console.log(listData); //拿了数据出来记得要index++要给回$("#bdBDivBox").attr("index") //当拿到最后一组的时候就要切换成下第一组，就拿getMyPage的属性isFinal来判断即可 if(listData.isFinal){ $("#bdBDivBox").attr("index",0); }else{ //不是最后一页就继续加一咯 $("#bdBDivBox").attr("index",index+1); } }); /** * 2.进行获取对应的数据，组拼li的字符串 * 1.获取对应的index页的数据 2.再进行拼接【写一个公共的方法】 * @param flag ：img or view * @param index ：pageNo */ function getStrtoAppendLis(flag,index){ //直接锁定哪个区域,就是Array对象 var data= yyzxConfigJS.yyzxConfigObj[flag]; //默认pageSize=7 var pageSize=7; var pageNo=parseInt(index); //获取第几页数据内容 //data:Array数据 //pageSize:一页对应的数量 //pageNo:第几页 var liData=getMyPage(data,pageSize,pageNo); //拿到对应页数据进行组拼数据：考虑到img与view应该不一样所以组拼的方式好像也是不太一样 var finalArr=[]; var taretList=liData.pageData; for(var i=0;i<taretList.length;i++){ var obj=taretList[i],arr=[]; if("img"==flag){ //6.1对li进行额外的属性来界定是img or view 还有对应的id值 arr.push("<li data-id='"+obj.id+"' class='li"+i+" targetLi'>"); arr.push("<img src='"+obj.imgUrl+"' alt=''>"); arr.push("<span>"); arr.push(obj.desc); arr.push("</span>"); arr.push("<b data-id='"+obj.id+"'></b>"); arr.push("<i></i>"); arr.push("<a href=''></a>"); arr.push("</li>"); }else if ("view"==flag) { arr.push("<li data-id='"+obj.id+"' class='li"+i+" targetLi'>"); arr.push(" <span>"); arr.push(obj.desc); arr.push(" </span>"); arr.push("<b></b>"); arr.push("<i></i>"); arr.push("<em ></em>"); arr.push("</li>"); }; finalArr.push(arr.join("")); } //根据对应的字符串拼接上对应的bzbox上 if("img"==flag){ $(".bzUl").html(finalArr.join("")); }else if("view"==flag){ $(".ssUl").html(finalArr.join("")); } //6.进行处理的弹窗事件，对每个li进行添加点击事件 //对应的append与html的添加事件，只有添加到dom结构之后才能进行添加对应的click事件，而且要一html就要添加click事件了 //因为这样才能使click生效，而分开写click写的话，则click是不触发的，这个需要知道，简单来说，就是说一添加dom结构就必须添加监听事件【纯属个人看法】 $(".targetLi").click(function(){ //第一步还是获取对应的flag值在 //拿到flag值-->cur值--->view or img var flag=$("#bdBDivBox").attr("flag"); //再拿其id值 var id=$(this).attr("data-id"); //然后这里把对应的li内容写入到弹框中的li上，写一个就可以了 //1.但是还是需要先从json去对应的cur对应的li值内容先 //2.取出数据才能进行写入 //getPageDataLocation获取的对象是对应的内容，是否有上下页的标示,再进行附加上下页的id值 var liObj=getPageDataLocation(flag,id); if("img"==flag){ //弹出遮罩然后写入数据内容 $("#scene-w").show(); //发现这部分上下页切换，还是弹窗都有使用，故需要写一个方法进行共用 showOnePageImg(liObj); //var str="<li><img src='"+liObj.info.imgUrl+"' data-src='"+liObj.info.imgUrl+"' alt='' width='1000' height='519' class='lazyload'/></li>"; //$("#scene-list").html(str); 把上下页的id写在ul上好让上下页来获取对应的参数值 //$("#scene-list").attr("nextId",liObj["nextId"]); //$("#scene-list").attr("prevId",liObj["prevId"]); 显示是否上下页内容:这里绝对的是上下页箭头是否显示 //if(liObj.next){ // $("#scenePrevBtn").show(); //}else{ // $("#scenePrevBtn").hide(); //} //if(liObj.prev){ // $("#sceneNextBtn").show(); //} else{ // $("#sceneNextBtn").hide(); //} }else if("view"==flag){ showOneView(liObj); } }); return liData } //图片:进行对应上下页内容进行换页操作 $("#scenePrevBtn").click(function(){ var prevId=parseInt($("#scene-list").attr("prevId")); //固定的flag值，使用flag值就是img值 var liObj=getPageDataLocation("img",prevId); showOnePageImg(liObj); }); $("#sceneNextBtn").click(function(){ var nextId=parseInt($("#scene-list").attr("nextId")); //固定的flag值，使用flag值就是img值 var liObj=getPageDataLocation("img",nextId); showOnePageImg(liObj); }); //图片弹窗显示 function showOnePageImg(liObj){ var str="<li><img src='"+liObj.info.imgUrl+"' data-src='"+liObj.info.imgUrl+"' alt='' width='1000' height='519' class='lazyload'/></li>"; $("#scene-list").html(str); //把上下页的id写在ul上好让上下页来获取对应的参数值 $("#scene-list").attr("nextId",liObj["nextId"]); $("#scene-list").attr("prevId",liObj["prevId"]); //把图片信息也带上 //$("#scene-desc").html(liObj.info.desc); //还可以这样写,取属性点或者['xxx'], $("#scene-desc").html(liObj.info['desc']); //写上第几页位置 $("#scene-page").html(liObj.index+"/"+liObj.total); $("#dl-link").attr("href",liObj.info.imgUrl); //显示是否上下页内容:这里绝对的是上下页箭头是否显示 if(liObj.prev){ $("#scenePrevBtn").show(); }else{ $("#scenePrevBtn").hide(); } if(liObj.next){ $("#sceneNextBtn").show(); } else{ $("#sceneNextBtn").hide(); } } //7.根据id来取对应的数据位置，是否是有下一页与上一页 function getPageDataLocation(flag,id){ var obj={ //对应li的内容 info:[], //第几条的标示 index:-1, //总条数的标示 total:-1, //记录的上下页对应的id，没有则为-1 prevId:-1, nextId:-1, prev:false, next:false } //直接锁定哪个区域,就是Array对象 var data= yyzxConfigJS.yyzxConfigObj[flag]; var liIndex=0; for(var k=0;k<data.length;k++){ //进行匹配id值在哪个位置 if(id == data[k]["id"]){ obj.info=data[k]; liIndex=k; break; } } obj.total=data.length; obj.index=liIndex+1; //不允许没有数据，或者一页，因为这样才会都没有上一页与下一页内容值 if(data.length>1){ //不是第一页就有上一页 obj.prev=(liIndex==0)?false:true; obj.next=(liIndex==(data.length-1))?false:true; //获取上下一个id值 if(obj.prev){ //上一页 obj.prevId=data[liIndex-1]["id"]; } if(obj.next){ //下一页 obj.nextId=data[liIndex+1]["id"]; } }else{ obj.prev=false; obj.next=false; } return obj; } //3.获取每页的方法 function getMyPage(data,pageSize,pageNo){ var obj={ pageNo:pageNo, isNext:false, isFirst:false, isFinal:false, pageSize:pageSize, totalSize:0, pageData:[] }; //处理逻辑 //总页数 var len=Math.ceil(data.length/pageSize); //isFirst获取 //if(pageNo==1){ // obj.isFirst=true; //}else{ // obj.isFirst=false; //} //isFirst获取 obj.isFirst=(pageNo==1)?true:false; //isFinal获取 obj.isFinal=(pageNo==len)?true:false; //isNext获取 obj.isNext=(pageNo<len)?true:false; //totalSize获取 obj.totalSize=len; //pageData获取 //思路:只有不是最后一页，其他全部取满 //变量的数组 var arr=[]; if(pageNo<len){ //不是最后一页，取满的 for(var i=(pageNo-1)*pageSize;i<pageNo*pageSize;i++){ arr.push(data[i]); } }else{ //最后一页，取剩余 for(var i=(pageNo-1)*pageSize;i<data.length;i++){ arr.push(data[i]); } } obj.pageData=arr; return obj; }