基於Bootstrap仿淘寶分頁控件實現

時間 2019-11-19

原文原文鏈接

你們都應該上過淘寶的吧，沒有上過淘寶的同窗估計也沒幾個了，可是我相信大多數的人都是在淘寶上面買完東西就下線，不多有人會關注淘寶上的設計這類的，可是對於普通人這樣還行，可是對於一個程序員這樣就可不行了，由於博主本人是從事前端方面的工做，因此就經過仿照淘寶的設計樣式，以求在技能上面可以有一個大的突破javascript

先上一張淘寶的分頁圖片：css

根據上圖中對淘寶分頁控件的分析，咱們大體上能夠將淘寶分頁控件分紅兩部分，一部分是核心部分，這一部分主要就是一個分頁的核心功能，這個功能同時也是也是不可或缺的，還有一部分是拓展部分，這一部分是至關於增長一些功能來加強和改善用戶體驗的，可是在不少現成的分頁控件是沒有實現的(這個也是一個本身造輪子的理由之一)。可是依據我對淘寶分頁控件的理解再結合工做上面的需求分析，我認爲淘寶的分頁控件要改爲具備普適性的業務功能控件還須要有這些改動：html

一、好比拓展部分感受比較偏小了一點，以我我的的體驗上來講不是挺好前端

二、因爲淘寶的寶貝比較多，因此只須要顯示到一百頁就好了，可是在實際的項目中咱們可能沒有100頁，因此咱們須要顯示到最後一頁的頁數就好了java

三、因爲拓展部分不是必須的，只是能夠加強用戶體驗，可是有些時候頁面給分頁預留的位置不夠，這個時候咱們就能夠經過設置來除去這一部分jquery

想想，對於普通的分頁控件，咱們須要什麼元素：pageNo(當前頁)，pageSize(每頁渲染個數)，count(總數),這幾個控件是必不可少的，pageNo主要是用來標識要渲染第幾頁爲當前頁，pageSize和count主要是用來計算出要渲染的頁數(pageCount)，pageCount的實現邏輯以下：git

var pageCount=0;
if(count%pageSize==0){
    pageCount=count/pageSize;
}esle{
    pageCount=count/pageSize+1;
}

這樣咱們就能保證了pageCount爲咱們所要渲染的最終的頁數，除了這個基礎配置還有一些其餘的配置我認爲也是須要增長的程序員

一、增長對最後一個肯定按鈕的名稱修改，這個可能在咱們的業務中不叫肯定而叫修改之類的名稱，因此若是有一個能夠修改的功能，那麼也方便了業務的拓展（default:"肯定"）github

二、主色調修改，咱們知道像淘寶的分頁控件採用的是橙黃色的主色調，而後若是是按照經典的bootstrap的配色方案來看，是採用淺藍色的，因此這個也要支持修改(default:lightblue)算法

三、支持showNum的配置，showNum指的是當pageNo=1的時候要顯示的頁數，例如淘寶的分頁控件顯示的是1到5頁外加一個省略號。因此showNum=5，表示顯示5頁;(default:6)

四、支持skipPart，這一部分指的就是分頁控件的拓展部分，這部分咱們應該要按照需求來決定是否顯示（default:true）

* 括號內爲參數的默認值

根據對淘寶網站的觀察，以及對對其設計上面的思考，我認爲大體上的插件設計思路以下：

第一步，接收用戶的傳入參數

第二步，將用戶的部分傳入參數傳遞給一個分頁算法，而後經過分頁算法將一些最終要渲染的結果經過JSON的形式返回出來

第三步，對JSON數據進行渲染使其最終生成分頁控件

這樣的設計主要是符合軟件工程的高內聚、低耦合的設計思想，經過這個設計即便分頁算法的實現相對的困難，可是咱們卻把分頁的渲染與算法的實現分離開來，有利於後期功能的拓展，提升了組件的可維護性。

其實這一塊的分頁算法頁說不上設計，純粹的就是模仿吧，模範淘寶的分頁規則，在默認的狀況下，咱們會分紅這樣的四種狀況(以淘寶爲例)

一、pageNo爲1-5頁的時候，將pageNo的當前頁改變爲點擊的頁數

二、當pageNo爲6,7頁的時候，增長渲染1到當前頁+1，例如選的是6頁的話，那麼咱們就渲染1~7頁

三、接着咱們判斷pageNo是否大於等於pageCount(當前頁)-showNum，若是是的話，也就是說明到了最後的那幾頁了，那麼咱們這個時候就要直接渲染最後的showNum頁，並把pageNo點亮

四、最後的一種狀況：除了上面提到的這些狀況，剩下的咱們都是經過渲染pageNo的前2頁和pagNo的後兩頁，還有就是渲染第一頁和第二頁。

接下來就來分享一下我在分頁算法上面的設計：

//分頁算法邏輯，主要對分頁進行邏輯運算，不作渲染，返回值爲JSON
        function PageAlgorithm(pageNo,pageSize,count,showNum){
            var data="";
            if(pageNo==1){
                data='{"algorithm":[{"text":"上一頁","num":0,"status":"disabled"}';
            }else{
                data='{"algorithm":[{"text":"上一頁","num":"'+(pageNo-1)+'","status":"abled"}';
            }
            //判斷分頁類型
            if(count>showNum){
                if(pageNo<=showNum+2){
                    //判斷pageNo是否在要初始化顯示的頁碼內
                    if(pageNo<=showNum){
                        for(var i=1;i<=showNum;i++){
                            if(pageNo==i){
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                                
                            }else{
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                            }    
                        }
                        if(pageNo==showNum){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }else{
                        for(var i=1;i<=pageNo;i++){

                            if(i==pageNo){
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                            }else{
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                            }
                        }
                        if(pageNo!=count){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                    //選中最後一頁時，將省略號隱藏
                    if(pageNo!=count){
                        if(pageNo!=(count-1)){
                            data+=',{"text":"…","num":"more","status":""}';
                        }
                        
                    }
                    
                }else if(pageNo>count-showNum){
                    data+=',{"text":"1","num":"1","status":"abled"}';
                    data+=',{"text":"2","num":"2","status":"abled"}';
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                    for(var i=count-showNum+1;i<=count;i++){
                        if(pageNo==i){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                        }else{
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                }
                else{
                    data+=',{"text":"1","num":"1","status":"abled"}';
                    data+=',{"text":"2","num":"2","status":"abled"}';
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                    for(var i=pageNo-2;i<=pageNo+2;i++){
                        if(i==pageNo){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                        }else{
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                }
            }else{                
                for(var i=1;i<=count;i++){
                    if(pageNo==i){
                        data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                    }else{
                        data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                    }

                }
                
            }
            if(pageNo==count){
                data+=',{"text":"下一頁","num":"'+(pageNo+1)+'","status":"disabled"}]}';
            }else{
                data+=',{"text":"下一頁","num":"'+(pageNo+1)+'","status":"abled"}]}';
            }
            var json_return = JSON.parse(data);
            return json_return;

        }

注：沒必要關注裏面的JSON最終要呈現的格式，主要的緣由是這些參數最終是要傳遞到下一個方法中去渲染分頁控件，而這些至關因而在兩個方法中約定的，咱們主要要關注的是怎樣對分頁控件進行類型上的區別，從而渲染出不一樣的JSON數據

這一款插件就是本次教程的一個最終的產物，這一款插件在實現方案上面是仿照淘寶的邏輯，可是因爲公司的主營業務與淘寶的業務上面有些區別，因此樣式風格不太一致。可是也是可以很好的知足通常業務上面常見的需求。

具體怎麼使用，咱們來舉個例子

咱們要獲得這樣的一個分頁控件，總數據爲70條，每頁顯示3條數據，而且要顯示拓展部分，咱們只須要以下這樣去調用就好了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script type="text/javascript" src="jPage.js"></script>
    <script type="text/javascript">
        $("#test").page({count:70,pageSize:3,skipPart:true});
        
    </script>
</body>
</html>