前端实现静态分页展示内容
作者：秋了秋 发表时间：2016年04月13日
为什么会有前端分页，请听我细细道来。
包括这一次，我已经是有两次被要求用前端做分页的情况了。无奈只好自己动手丰衣足食，写个方法方便以后使用。
内容分页最初的目的是为了减轻服务器压力，一次性把所有内容读出来，内容量大的话，会给数据库造成很大的压力，而且响应速度也很慢。所以把大数据分割成一小段一小段地截取读出来。
后端做这种事情最为常见了，但是前端做分页就有点稀奇，但也有用武之地，比如说数据量小的话，前端分页的目的就是解决一个页面同时显示太多条目而导致眼睛疲劳的现象，所以前端分页就是欺骗眼睛的行为，数据还是要一次性全部读取出来。
其实质就是控制一部分显示一部分隐藏，那么如何巧妙的实现一部分显示一部分隐藏且能随点击分页数字进行对应的显示，还有前一页和后一页的功能。请看我的方法：
<ul id="list"> <li class="atitle"><span class="ttime">1: </span>php与mysql数据库通信三步曲</li> <li class="atitle"><span class="ttime">2: </span>响应式宽屏滚动式幻灯片</li> <li class="atitle"><span class="ttime">3: </span>致所有使用本站外链资源的朋友</li> <li class="atitle"><span class="ttime">4: </span>长城宽带WiFi连接ftp列表出错解决方案</li> <li class="atitle"><span class="ttime">5: </span>一小段代码实现代码高亮的功能</li> <li class="atitle"><span class="ttime">6: </span>Javascript保存和调用以及清除cookies</li> <li class="atitle"><span class="ttime">7: </span>Javascript拖拽功能代码</li> <li class="atitle"><span class="ttime">8: </span>Javascript完美运动通用封装框架</li> <li class="atitle"><span class="ttime">9: </span>解决无法直接拖动文件到软件打开</li> </ul> <div class="pager"><span>prev</span><span>1</span><span>2</span><span>next</span></div>
可以看到结构很简单，一个大的容器ul包含众多条目li,为了实现分页，我们先要将全部li隐藏起来，最好用css来做。
#list>li{display:none;}
下面是js方法代码，首先刚进入页面的时候让一部分显示出来，显示多少条目我们可以定义一个喜欢的数字，比如说5条吧，当然是用for循环做了：
for(var count=0;count<5;count++){
$("#list>li").eq(count).show();
}
ul后面还有个class为pager的div，是放的数字链接，用来点击分页的。除了数字里面还有两个非数字的按钮分别为prev和next,所以我这里采取了识别所点span里面的内容是否是一个数字，数字、prev、next三种实现方式。首先是三种都通用的，点击这三种情况的时候，改变所点击span的样式为高亮，通过加class来实现，同时先把所有li隐藏起来，为后续li的显示做铺垫。在此同时定义一个计数容器count;
count=0;
$(".pager>span").click(function(){
$(this).addClass("f-theme").siblings().removeClass("f-theme");
$("#list>li").hide();
var val=parseInt($(this).text());//获取span里面的内容
/**没有闭合，接下文代码**/
接下来就是根据val的值来处理不同情况，当它是个数字的时候，为了方便计算，让count等于这个数字-1，并通过这个数字进行匹配筛选需要显示的li的索引范围：
if(!isNaN(val)){
var begin=(val-1)*5,end=begin+5;count=val-1;
for(var i=begin;i<end;i++){
$("#list>li").eq(i).show();
}
}
当点击的span不是一个数字时，这时候剩余两种情况，一个是prev,一个是next,这里我通过索引来，分别为第一个和最后一个。当点击prev时候让count-1，在进行操作前，要对count进行判断，主要是避免超出可显示范围。
else if($(this).index()==0){
if(count<1){
count=1;
console.log("已经是第一页了");
}
var begin=(count-1)*5,end=begin+5;
for(var i=begin;i<end;i++){
$("#list>li").eq(i).show();
}
count--;
}
当点击next的时候，让count++,在此之前同样需要进行边界处理：
else if($(this).index()==($(".pager>span").length-1)){
if(count>=$(".pager>span").length-3){
count=$(".pager>span").length-4;
console.log("已经是最后一页了");
}
var begin=(count+1)*5,end=begin+5;
for(var i=begin;i<end;i++){
$("#list>li").eq(i).show();
}
count++;
}
至此，分页功能就算写好了，接下来整理一下代码，封装成函数，方便调用。整个方法中就三个需要变化的关键点，分别为5、".pager>span"、"#list>li"，所以封装的话带三个参数：
function qiuyePage(listcount,clickbutton,listitem){
$(listitem).hide();
for(var count=0;count<listcount;count++){
$(listitem).eq(count).show();
}
count=0;
$(clickbutton).click(function(){
$(this).addClass("f-theme").siblings().removeClass("f-theme");
$(listitem).hide();
var val=parseInt($(this).text());
if(!isNaN(val)){
var begin=(val-1)*listcount,end=begin+listcount;count=val-1;
for(var i=begin;i<end;i++){
$(listitem).eq(i).show();
}
}else if($(this).index()==0){
if(count<1){
count=1;
console.log("已经是第一页了");
}
var begin=(count-1)*listcount,end=begin+listcount;
for(var i=begin;i<end;i++){
$(listitem).eq(i).show();
}
count--;
}else if($(this).index()==($(clickbutton).length-1)){
if(count>=$(clickbutton).length-3){
count=$(clickbutton).length-4;
console.log("已经是最后一页了");
}
var begin=(count+1)*listcount,end=begin+listcount;
for(var i=begin;i<end;i++){
$(listitem).eq(i).show();
}
count++;
}
})
}
调用的话就这样就行了：
qiuyePage(5,".pager>span","#list>li");
补充：至于页数的话可以用比较灵活的方法生成，通过js根据内容条数来创建，比如：
(function page(){
var length=$("#list>li").length;
if(length>5){
var content="<span class='prev'>Prev</span>";
for(var i=0;i<Math.ceil(length/5);i++){
content+="<span>"+(i+1)+"</span>";
}
content+="<span class='next'>Next</span>";
$(".pager").html(content);
}else{
$(".pager").html("");
}
})()
对于动态生成的dom就不能用click了，上面所有click事件应该用delegate改造