我自己设计界面就遇到了这个问题，也在网上查了，但是没搜到，就干脆自己写了一个。-
1、为什么要用H5分页？
首先H5如果做前端，后端肯定也能分页，但是这样就会导致前端多次访问后端，而且用户体验不好。如果H5请求服务器一次，把分页技术放在前端，不仅能减轻服务器压力。还能
实现想要的效果。
首先分页技术是：接收到数据后一个界面显示不完数据，之后需要显示下一面的技术就是分页技术。
2、分页的类别，分页的优缺点？
分页技术分为：假分页，真分页，真假混合分页。
假分页：就是请求服务器一次而得到所有数据，但是如果数据庞大，就会解析较慢。优点是：能够前端能够随心所欲的得到想要的数据（灵活性强）。
真分页：就是每次请求一个页面的数据，点击下一页再次请求数据。但是会造成服务器访问次数过多，用户使用量大，就会造成用户等待。
真假混合分页：就是请求一次服务器得到3-4页的数据，也能显示出想要的数据，当超出4页的数据就再次请求数据。优点突出，但是前台操作麻烦。
我这里用来bootstrap框架。下面的例子有一个小bug，如果细心的人能找到（不过不影响结果）。
方法一：
思路：
1、首先显示下面的小标,让下面的小标能够根据内容多少而增减，
2、之后让小标增加上点击事件，并能够触发。
3、实现一个方法，遍历小标，获取点击的下标，根据下标显示内容。
方法二：--
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 "+(i+1)+""); } $("#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(""+data[i].name+""+data[i].sex+""+data[i].age+""); } } window.echoSlide = slide;})(window);
html代码：
方法三：
经过我又一天的努力，克服重重困难终于实现一个万能板的bootstrap分页技术了，下面我分享一下，不过想看懂有点难度。
期待有更好的代码。下面我说一下思路。
思路：首先传递值：表头，表内容，每一页需要显示多少行，以及找到显示到哪个元素下（HTML页面）。
js部分：主要分为表格部分和下面的点击事件：先实现下面的动态生成小图标，并添加点击事件。
其次：实现表头的内容，然后实现内容的添加。是不是很容易呢？
//博客园老牛大讲堂
分页2.js代码：
(function(window){ var title; var data; var rows; var url; function setContent(e){ //博客园老牛大讲堂--初始化页面 var top="
"; e.append(top); } function setTitleContent(title){ //博客园老牛大讲堂--添加表头信息 for(var i=0;i "+title[i]+""); } } function setIcon(pages){ //博客园老牛大讲堂--增加下面的小图标 for(var i = 0; i < pages; i++) { $("#fenye").append(" "+(i+1)+" "); } $("#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 "); for(var t in data[b]){ $("#contant tr:eq("+j+")").append(""+data[i][t]+""); } $("#contant").append(""); } } 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); 方法四：如果大家有什么不懂的，或者有更好的分页方案，希望能告诉我。