一两年之前在写java的时候，分页的逻辑是写在后端的，用java去实现，jsp是动态展示页码和数据。但是对于一个用ajax加载的分页数据来说，分页的逻辑必须也在前端完成，那么就不得不去思考一下在js里如何完成分页。
在开始之前，我们不妨撕思考一下，我们要展示的分页数据是什么样的，因为如果是不同的数据，那我们展示分页的代码应该是不一样的。
其中就有一种是后端push过来的数据是全部的数据，我们在一个页面不方便展示，从而考虑模拟分页，总之从后端拿过来的是一个数组，我们根据不同的页码取数组中不同的部分。
其实最好的方案是后端push过来的是单页的数据，根据前端传递的当前页码获取与页码，这里需要注意的是此时，后端必须把数据列表总条数也一并返给前端，因为计算页码的时候必须用到总条数。此时，后端传来的数据应该是长成这样的{total:100,list:[]}
我们现在就此种情况下的分页分析是实现，下图是效果
我们先不用管数据的展示，因为我们每次从后端那来的数据里面有一个list，而我们要展示的数据就是这个list，分页的重点是在分页。
在我们打开页面还没有点击页码的时候，页面应该显示的是第一页的数据。
所以上来我们就应该请求一次后端，而且传递的参数应该是当前页page = 1
当前页码应该是根据我们点击页码，或者点击上一下、下一页的时候改变，在这里我们可以把页码定义一个全局变量，初始值为1，其他两个变量是要根据total来计算的，而且很函数里面都需要用到，都给他拎到全局。
var page = 1; //当前页 var pageAll = 1;//总页数 var pageSize = 8;//每页显示条数
这样我么就可以加载初始数据了，也就是page=1的数据。
loadData();//初始加载数据
//加载数据方法
function loadData(){
$.ajax({
url:"../adquery",
type:"get",
data:{"action":"queryAll","page":page},
success:function(data){
showList(data.rows);//显示数据表格
showPage(data.total,page);//显示分页
}
});
}
加载数据自然是ajax，因为数据的加载，和显示是我们点击页码的时候都会执行的，所以将其放到函数中，以便调用。loadData()函数很好理解，就不过多说，无非就是一个ajax，成功之后需要刷新两个部分的页面内容，1个是页面的数据，还有一个是分页页码。
我们只关心页码显示部分，所以来看showPage(data.total,page);函数
//分页方法
function showPage(total,now){
var _LENGTH = 5;//最大页数5
var pageArr = [];//
//整页
if(total%pageSize==0){
pageAll = total/pageSize;
}else{//非整页
pageAll = (total - total%pageSize)/pageSize + 1;
}
//总页数小于5页
if(pageAll<=_LENGTH){
for(var i = 0 ;i < pageAll; i++){
pageArr[i] = i+1;
}
}else{//总页数大于5页
if(now+2 <= pageAll&&now-2 > 0){//当前页没有超过总页数
for(var i = 0 ;i < _LENGTH; i++){
pageArr[i] = now-2 + i;
}
}else if(now<=2){
pageArr = [1,2,3,4,5] ;
}else{
for(var i = 0 ;i < _LENGTH; i++){
pageArr[i] = pageAll-4+i;
}
}
}
//绘制页面
drawPage(pageArr,now,pageAll);
}
我们这个方法里定义了一个最大页码数，和一个Arr[]数组。其实很理解，Arr[数组的最大长度就是最大页码数5。也就是说，最多只显示5个页码，12345，或者23456。
在这个函数中，最重要的逻辑是通过计算得到这个pageArr[]; 如果的到的数组是[1,2,3]; 那么页码就是显示是1,2,3；如果数组是[5,6,7,8,9];那么的显示的页码就是5,6,7,8,9，当然，在这之前，我们顺便把总页数pageAll计算了出来。
之后就是在页面中绘制页码了
//绘制分页dom方法
function drawPage(pageArr,now,pageAll){
var _html = "";
for(var i = 0; i<pageArr.length; i++){
_html += "<a href=‘javascript:void(0);‘>"+pageArr[i]+"</a>";
}
$(".pagelist").html(_html);
var index = getIndex(pageArr,now);
$(".pagelist > a").eq(index).css({"background":"#CCC"});
$(".pagenow").text(now+"/"+pageAll);
}
//获取点击当前页坐标
function getIndex(pageArr,now){
var index = 0;
for (var i = 0 ; i < pageArr.length; i++){
if(pageArr[i] == now ){
index = i;
}
}
return index;
}
绘制页码的时候把当前页的css样式修改以显示是当前页码。
最后还需要给页码添加点击事件
//点击分页
$(".zs-page a").live("click",function(){
var text = $(this).text();//获取当前点击页数
if(text == "上一页"){ //如果是点击的上一页
if(page>1){
page--;
}else{
//alert("已经是第一页");
}
}else if(text == "下一页"){//如果是点击的下一页
if(page<pageAll){
page++;
}else{
//alert("已经是最后一页");
}
}else{
page = parseInt(text);//将获取的页数转化成数字
}
loadData();
});
因为页码是动态添加的，所以这里用的是live方法添加的事件，当然新版的jquery支持on方法动态添加事件。
代码写的是很简洁和明了的，逻辑也很明确，适合的时候你可以去试一试这个方法。
