jQuery前端开发实战教程第六章课后习题答案 javascript前端开发案例pdf |
您所在的位置：网站首页 › javascript前端开发案例教程第一章课后答案 › jQuery前端开发实战教程第六章课后习题答案 javascript前端开发案例pdf |
jQuery前端开发实战教程第六章课后习题答案 javascript前端开发案例pdf
|
嘿嘿嘿，鸽鸽鸽了好几天了，之前想着要挑战每天写一篇博文分享的，结果虽然一天不落，但也从一开始的分享变成应付了事的，发了好多都是面试题纯概念什么的。
所以，以后只会多多给大家分享有价值的文章，不再水文章了。。。 正文开始今天依然是一个小案例，前端分页 其实，前端分页我们只是在前期学习的，因为分页不是前端来做的，前端只是负责显示，前端主要做的把要显示的第几页，一页要显示多少条数据，传给后台就好了，数据的获取是后端的事情，后端把数据全部返回给前端，前端根据这个数据做布局和显示就好了。 后端分页我们以后再讲，今天先说说模拟几条数据来做这个分页。 实现效果如下：有点简陋莫怪~
HTML代码：大家按顺序对比页面吧 1 1 首页 上一页 下一页 末页共： 页 当前：页 JavaScript代码： var arr=[ //默认数据，数组格式 "aa","bb", "cc","dd", "ee","ff", "gg","hh", "ii" ]; var page =1 ; //页数 var limit =2; //每页显示条数 function prev(){ //上面HTML给上一页按钮添加了一个单击点击事件，点击这个按钮进入此函数 if(page >1){ //判断当页数大于1时，页数-1 page-=1; var nowArr= arr.slice( (page-1)*limit ,page*limit )//定义变量盛放当前页面的数据，下面解释这一句 console.log(nowArr)//控制台打印数据 showLi(nowArr);//页面上渲染当前页的数据，渲染页数，这里是调用函数 nowPage(page); }else{ //否则就是页数为1，提示这是首页 alert("这是首页") } } function next(){ //按钮下一页，除了判断条件外都与上一页相同 if( page < Math.ceil( arr.length / limit ) ){ //判断页数小于总页数时，页数增加+1，这句下面解释 page +=1; var nowArr= arr.slice( (page-1)*limit,page*limit ); console.log(nowArr); showLi(nowArr); nowPage(page); }else{ alert("这是最后一页"); } } function first(){ //点击首页，页数为1，渲染页面 page= 1; var nowArr= arr.slice( (page-1)*limit,page*limit ); showLi(nowArr); nowPage(page); } function last(){ //点击末页，页数为1，渲染页面 page= Math.ceil( arr.length /limit ); var nowArr= arr.slice( (page-1)*limit,page*limit ); showLi(nowArr); nowPage(page); } window.onload=function(){ //onload 当页面加载时显示的页面，默认第一页 var nowArr= arr.slice((page-1)*limit,page*limit); console.log(nowArr); showLi(nowArr); nowPage(page); //这是页面最上面的button按钮 var sum= Math.ceil( arr.length /limit ); //定义变量获取所有的页数，有几页就有几个button按钮 var str="" //定义一个空变量，在下面遍历完页数后，+=把页数对应的数字赋值给button按钮，同时创建对应的button按钮 for(var i=1;i |
【本文地址】
今日新闻 |
推荐新闻 |