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方法動態添加事件。

 

代碼寫的是很簡潔和明了的，邏輯也很明確，適合的時候你可以去試一試這個方法。