Bootstrap的jq匿名函数，实现分页技术--博客园老牛大讲堂
我自己设计界面就遇到了这个问题，也在网上查了，但是没搜到，就干脆自己写了一个。-博客园老牛大讲堂
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);
方法四：如果大家有什么不懂的，或者有更好的分页方案，希望能告诉我。
