js分页的一些思考

一两年之前在写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方法动态添加事件。

 

代码写的是很简洁和明了的，逻辑也很明确，适合的时候你可以去试一试这个方法。