我自己设计界面就遇到了这个问题,也在网上查了,但是没搜到,就干脆自己写了一个。-博客园老牛大讲堂
1、为什么要用H5分页?
首先H5如果做前端,后端肯定也能分页,但是这样就会导致前端多次访问后端,而且用户体验不好。如果H5请求服务器一次,把分页技术放在前端,不仅能减轻服务器压力。还能
实现想要的效果。
首先分页技术是:接收到数据后一个界面显示不完数据,之后需要显示下一面的技术就是分页技术。
2、分页的类别,分页的优缺点?
分页技术分为:假分页,真分页,真假混合分页。
假分页:就是请求服务器一次而得到所有数据,但是如果数据庞大,就会解析较慢。优点是:能够前端能够随心所欲的得到想要的数据(灵活性强)。
真分页:就是每次请求一个页面的数据,点击下一页再次请求数据。但是会造成服务器访问次数过多,用户使用量大,就会造成用户等待。
真假混合分页:就是请求一次服务器得到3-4页的数据,也能显示出想要的数据,当超出4页的数据就再次请求数据。优点突出,但是前台操作麻烦。
我这里用来bootstrap框架。下面的例子有一个小bug,如果细心的人能找到(不过不影响结果)。博客园老牛大讲堂
方法一:博客园老牛大讲堂
思路:
1、首先显示下面的小标,让下面的小标能够根据内容多少而增减,
2、之后让小标增加上点击事件,并能够触发。
3、实现一个方法,遍历小标,获取点击的下标,根据下标显示内容。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../../css/bootstrap.min.css">//这里是相对路径-博客园老牛大讲堂 <script type="text/javascript" src="../../js/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="../../js/bootstrap.min.js"></script> </head> <body> <div class="text-center"> <table class="table table-striped"> <thead> <tr> <td>名称</td> <td>年龄段</td> <td>年龄</td> </tr> </thead> <tbody id="contant"> </tbody> </table> </div> <div class="container"> <ul class="pagination"> <li onclick="first()"><a href="#">«</a></li> </ul> <ul class="pagination" id="fenye"> </ul> <ul class="pagination"> <li onclick="end()"><a href="#">»</a></li> </ul> </div> <script type="text/javascript"> var All = [{ "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "444", "sex": "男生", "age": "19岁" }] var rows=4;//这个是页面显示的条数(可以修改该) var pages = Math.ceil(All.length / rows); init(pages);//初始化页面 pagesClick();//添加点击事件 fuzhi();//遍历出选中的内容 //初始化下面的图标 function init(pages){ for(var i = 0; i < pages; i++) { $("#fenye").append("<li><a href='#'>"+(i+1)+"</a></li>"); } $("#fenye li").eq(0).addClass("active"); } //为下面的小图标增加监听事件 function pagesClick(){ $("#fenye li").click(function(){ var index=$(this).index(); $(this).siblings().removeClass("active"); $(this).addClass("active"); fuzhi(); }); } //点击前一个 function first(){ var a=$("#fenye .active").index(); var b=a-1; if(a>0) { $("#fenye li").eq(a).removeClass("active"); $("#fenye li").eq(b).addClass("active"); fuzhi(); } } //点击后一个 function end(){ var a=$("#fenye .active").index(); var b=$("#fenye li").length; if(a<b-1) { $("#fenye li").eq(a).removeClass("active"); $("#fenye li").eq(a+1).addClass("active"); fuzhi(); } } //遍历小下标,得到后显示内容 function fuzhi(){ $("#contant").empty();//首先清空contant的内容为空 var a=$("#fenye .active").index(); var b=rows*a; for(var i=b;i<b+rows;i++){ $("#contant").append("<tr><td>"+All[i].name+"</td><td>"+All[i].sex+"</td><td>"+All[i].age+"</td></tr>");//这个是内容区域(可以修改) } } </script> </body> </html>
方法二:--博客园老牛大讲堂
1、当然上面的方法固然能够实现,但是!对于我这个小神来说这是远远不够的。
2、想了解更多,看看下面例子:
3、思路:和上面相同。但是!用了js里面的匿名函数
代码:
(function(window){//博客园老牛大讲堂 var data; var rows; slide.prototype.first = function(){ var a=$("#fenye .active").index(); var b=a-1; if(a>0) { $("#fenye li").eq(a).removeClass("active"); $("#fenye li").eq(b).addClass("active"); fuzhi(); } } slide.prototype.end= function(pages){//博客园老牛大讲堂 var a=$("#fenye .active").index(); var b=$("#fenye li").length; if(a<b-1) { $("#fenye li").eq(a).removeClass("active"); $("#fenye li").eq(a+1).addClass("active"); fuzhi(); } } slide.prototype.init = function(pages){ for(var i = 0; i < pages; i++) { $("#fenye").append("<li><a href='#'>"+(i+1)+"</a></li>"); } $("#fenye li").eq(0).addClass("active"); fuzhi(); } slide.prototype.pagesClick = function(){ $("#fenye li").click(function(){ var index=$(this).index(); $(this).siblings().removeClass("active"); $(this).addClass("active"); fuzhi(); }); } function slide(all,num){ data=all; rows=num; var pages = Math.ceil(data.length / rows); this.init(pages);//初始化页面 this.pagesClick();//添加点击事件 fuzhi(); } function fuzhi(){ $("#contant").empty(); var a=$("#fenye .active").index(); var b=rows*a; for(var i=b;i<(b+rows);i++){ $("#contant").append("<tr><td>"+data[i].name+"</td><td>"+data[i].sex+"</td><td>"+data[i].age+"</td></tr>"); } } window.echoSlide = slide; })(window);
html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" />//博客园老牛大讲堂 <title>排班管理--排班录入</title> <link rel="stylesheet" href="../../css/bootstrap.min.css"> <link rel="stylesheet" href="../../css/system.css" /> <script type="text/javascript" src="../../js/calendar.js" ></script> <script type="text/javascript" src="../../js/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="../../js/bootstrap.min.js"></script> <script type="text/javascript" src="../../js/define.js" ></script> </head> <body> <!--内容 博客园老牛大讲堂--> <div id="tablea"> <div class="text-center"> <table class="table table-striped"> <thead> <tr> <td>名称</td> <td>年龄段</td> <td>年龄</td> </tr> </thead> <tbody id="contant"> </tbody> </table> </div> <div class="container"> <ul class="pagination"> <li onclick="Start()"> <a href="#">«</a> </li> </ul> <ul class="pagination" id="fenye"> </ul> <ul class="pagination"> <li onclick="End()"> <a href="#">»</a> </li> </ul> </div> </div><!--内容--> </div> <script>var All = [{ "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "444", "sex": "男生", "age": "19岁" }]; var page= new echoSlide(All,4); function Start(){ page.first(); } function End(){ page.end(); } </script> <body> </html>
方法三:博客园老牛大讲堂
经过我又一天的努力,克服重重困难终于实现一个万能板的bootstrap分页技术了,下面我分享一下,不过想看懂有点难度。
期待有更好的代码。下面我说一下思路。
思路:首先传递值:表头,表内容,每一页需要显示多少行,以及找到显示到哪个元素下(HTML页面)。
js部分:主要分为表格部分和下面的点击事件:先实现下面的动态生成小图标,并添加点击事件。
其次:实现表头的内容,然后实现内容的添加。是不是很容易呢?
<!DOCTYPE html>//博客园老牛大讲堂 <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../../css/bootstrap.min.css"> <script type="text/javascript" src="../../js/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="../../js/bootstrap.min.js"></script> <script type="text/javascript" src="分页2.js"></script> </head> <body> <div id="Table"></div> </body> <script type="text/javascript">//博客园老牛大讲堂 var All = [{ "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "林柯", "sex": "少女", "age": "21岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "周菲", "sex": "少女", "age": "22岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "叶问天", "sex": "男生", "age": "19岁" }, { "name": "444", "sex": "男生", "age": "19岁" }] var title = ["名字", "年龄段", "年龄"]; var fenye = new echoSlide(title, All, 3, $("#Table")); </script> </html>
分页2.js代码:
(function(window){ var title; var data; var rows; var url; function setContent(e){//博客园老牛大讲堂--初始化页面 var top="<div class='text-center'><table class='table table-striped'><thead><tr id='top'></tr></thead><tbody id='contant'></tbody></table></div><div class='container'><ul class='pagination'><li id='first'><a href='#'>«</a></li></ul><ul class='pagination' id='fenye'></ul><ul class='pagination'><li id='end'><a href='#'>»</a></li></ul></div>"; e.append(top); } function setTitleContent(title){//博客园老牛大讲堂--添加表头信息 for(var i=0;i<title.length;i++) { $("#top").append("<td>"+title[i]+"</td>"); } } function setIcon(pages){//博客园老牛大讲堂--增加下面的小图标 for(var i = 0; i < pages; i++) { $("#fenye").append("<li><a href='#'>"+(i+1)+"</a></li>"); } $("#fenye li").eq(0).addClass("active"); } function setClick(){//博客园老牛大讲堂--为小图标设置点击事件 $("#fenye li").click(function(){ var index=$(this).index(); $(this).siblings().removeClass("active"); $(this).addClass("active"); fuzhi(); }); } function setFirstClick(){//博客园老牛大讲堂--为下面小图标第一个设置点击事件 $("#first").click(function(){ var a=$("#fenye .active").index(); var b=a-1; if(a>0) { $("#fenye li").eq(a).removeClass("active"); $("#fenye li").eq(b).addClass("active"); } fuzhi(); }); } function setEndClick(){//博客园老牛大讲堂--为最后一个小图标设置点击事件 $("#end").click(function(){ var a=$("#fenye .active").index(); var b=$("#fenye li").length; if(a<b-1) { $("#fenye li").eq(a).removeClass("active"); $("#fenye li").eq(a+1).addClass("active"); } fuzhi(); }); } function fuzhi(){//博客园老牛大讲堂--对数据进行赋值操作 $("#contant").empty(); var a=$("#fenye .active").index(); var b=rows*a; var c=b+rows; for(var i=b,j=0;i<(c< data.length? c:data.length);i++,j++){ $("#contant").append("<tr>"); for(var t in data[b]){ $("#contant tr:eq("+j+")").append("<td>"+data[i][t]+"</td>"); } $("#contant").append("</tr>"); } } function slide(titl,dat,ro,e){ title=titl; data=dat; rows=ro; setContent(e);//博客园老牛大讲堂--设置静态内容 setTitleContent(title)//博客园老牛大讲堂--设置上面的头部 var pages = Math.ceil(data.length / rows); setIcon(pages);//博客园老牛大讲堂--添加下面的图标,并为第一个添加active setClick();//博客园老牛大讲堂---为每一个小图标增加监听事件 setFirstClick();//博客园老牛大讲堂---为第一个小图标增加 setEndClick();//博客园老牛大讲堂--为最后一个小图标增加 fuzhi();//博客园老牛大讲堂---赋值操作 } window.echoSlide = slide; })(window);
方法四:如果大家有什么不懂的,或者有更好的分页方案,希望能告诉我。