大家都應(yīng)該上過(guò)淘寶的吧，沒(méi)有上過(guò)淘寶的同學(xué)估計(jì)也沒(méi)幾個(gè)了，但是我相信大多數(shù)的人都是在淘寶上面買完?yáng)|西就下線，很少有人會(huì)關(guān)注淘寶上的設(shè)計(jì)這類的，但是對(duì)于普通人這樣還行，但是對(duì)于一個(gè)程序員這樣就可不行了，因?yàn)椴┲鞅救耸菑氖虑岸朔矫娴墓ぷ?，所以就通過(guò)仿照淘寶的設(shè)計(jì)樣式，以求在技能上面能夠有一個(gè)大的突破

一、淘寶分頁(yè)控件了解

先上一張?zhí)詫毜姆猪?yè)圖片：

根據(jù)上圖中對(duì)淘寶分頁(yè)控件的分析，我們大致上可以將淘寶分頁(yè)控件分成兩部分，一部分是核心部分，這一部分主要就是一個(gè)分頁(yè)的核心功能，這個(gè)功能同時(shí)也是也是不可或缺的，還有一部分是拓展部分，這一部分是相當(dāng)于增加一些功能來(lái)增強(qiáng)和改善用戶體驗(yàn)的，但是在很多現(xiàn)成的分頁(yè)控件是沒(méi)有實(shí)現(xiàn)的(這個(gè)也是一個(gè)自己造輪子的理由之一)。但是依據(jù)我對(duì)淘寶分頁(yè)控件的理解再結(jié)合工作上面的需求分析，我認(rèn)為淘寶的分頁(yè)控件要改成具有普適性的業(yè)務(wù)功能控件還需要有這些改動(dòng)：

1、比如拓展部分感覺(jué)比較偏小了一點(diǎn)，以我個(gè)人的體驗(yàn)上來(lái)說(shuō)不是挺好

2、由于淘寶的寶貝比較多，所以只需要顯示到一百頁(yè)就行了，但是在實(shí)際的項(xiàng)目中我們可能沒(méi)有100頁(yè)，所以我們需要顯示到最后一頁(yè)的頁(yè)數(shù)就行了

3、由于拓展部分不是必須的，只是可以增強(qiáng)用戶體驗(yàn)，但是有些時(shí)候頁(yè)面給分頁(yè)預(yù)留的位置不夠，這個(gè)時(shí)候我們就可以通過(guò)設(shè)置來(lái)除去這一部分

二、基于bootstrap的仿淘寶分頁(yè)控件輸入?yún)?shù)設(shè)定

想一想，對(duì)于普通的分頁(yè)控件，我們需要什么元素：pageNo(當(dāng)前頁(yè))，pageSize(每頁(yè)渲染個(gè)數(shù))，count(總數(shù)),這幾個(gè)控件是必不可少的，pageNo主要是用來(lái)標(biāo)識(shí)要渲染第幾頁(yè)為當(dāng)前頁(yè)，pageSize和count主要是用來(lái)計(jì)算出要渲染的頁(yè)數(shù)(pageCount)，pageCount的實(shí)現(xiàn)邏輯如下：

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

這樣我們就能保證了pageCount為我們所要渲染的最終的頁(yè)數(shù)，除了這個(gè)基礎(chǔ)配置還有一些其他的配置我認(rèn)為也是需要增加的

1、增加對(duì)最后一個(gè)確定按鈕的名稱修改，這個(gè)可能在我們的業(yè)務(wù)中不叫確定而叫修改之類的名稱，所以如果有一個(gè)可以修改的功能，那么也方便了業(yè)務(wù)的拓展（default:"確定"）

2、主色調(diào)修改，我們知道像淘寶的分頁(yè)控件采用的是橙黃色的主色調(diào)，然后如果是按照經(jīng)典的bootstrap的配色方案來(lái)看，是采用淺藍(lán)色的，所以這個(gè)也要支持修改(default:lightblue)

3、支持showNum的配置，showNum指的是當(dāng)pageNo=1的時(shí)候要顯示的頁(yè)數(shù)，例如淘寶的分頁(yè)控件顯示的是1到5頁(yè)外加一個(gè)省略號(hào)。所以showNum=5，表示顯示5頁(yè);(default:6)

4、支持skipPart，這一部分指的就是分頁(yè)控件的拓展部分，這部分我們應(yīng)該要按照需求來(lái)決定是否顯示（default:true）

* 括號(hào)內(nèi)為參數(shù)的默認(rèn)值

三、基于bootstrap仿淘寶插件設(shè)計(jì)思路

根據(jù)對(duì)淘寶網(wǎng)站的觀察，以及對(duì)對(duì)其設(shè)計(jì)上面的思考，我認(rèn)為大致上的插件設(shè)計(jì)思路如下：

第一步，接收用戶的傳入?yún)?shù)

第二步，將用戶的部分傳入?yún)?shù)傳遞給一個(gè)分頁(yè)算法，然后通過(guò)分頁(yè)算法將一些最終要渲染的結(jié)果通過(guò)JSON的形式返回出來(lái)

第三步，對(duì)JSON數(shù)據(jù)進(jìn)行渲染使其最終生成分頁(yè)控件

這樣的設(shè)計(jì)主要是符合軟件工程的高內(nèi)聚、低耦合的設(shè)計(jì)思想，通過(guò)這個(gè)設(shè)計(jì)即使分頁(yè)算法的實(shí)現(xiàn)相對(duì)的困難，但是我們卻把分頁(yè)的渲染與算法的實(shí)現(xiàn)分離開(kāi)來(lái)，有利于后期功能的拓展，提高了組件的可維護(hù)性。

四、分頁(yè)算法的設(shè)計(jì)

其實(shí)這一塊的分頁(yè)算法頁(yè)說(shuō)不上設(shè)計(jì)，純粹的就是模仿吧，模范淘寶的分頁(yè)規(guī)則，在默認(rèn)的情況下，我們會(huì)分成這樣的四種情況(以淘寶為例)

1、pageNo為1-5頁(yè)的時(shí)候，將pageNo的當(dāng)前頁(yè)改變?yōu)辄c(diǎn)擊的頁(yè)數(shù)

2、當(dāng)pageNo為6,7頁(yè)的時(shí)候，增加渲染1到當(dāng)前頁(yè)+1，例如選的是6頁(yè)的話，那么我們就渲染1~7頁(yè)

3、接著我們判斷pageNo是否大于等于pageCount(當(dāng)前頁(yè))-showNum，如果是的話，也就是說(shuō)明到了最后的那幾頁(yè)了，那么我們這個(gè)時(shí)候就要直接渲染最后的showNum頁(yè)，并把pageNo點(diǎn)亮

4、最后的一種情況：除了上面提到的這些情況，剩下的我們都是通過(guò)渲染pageNo的前2頁(yè)和pagNo的后兩頁(yè)，還有就是渲染第一頁(yè)和第二頁(yè)。

接下來(lái)就來(lái)分享一下我在分頁(yè)算法上面的設(shè)計(jì)：

//分頁(yè)算法邏輯，主要對(duì)分頁(yè)進(jìn)行邏輯運(yùn)算，不做渲染，返回值為JSON
function PageAlgorithm(pageNo,pageSize,count,showNum){
var data="";
if(pageNo==1){
data='{"algorithm":[{"text":"上一頁(yè)","num":0,"status":"disabled"}';
}else{
data='{"algorithm":[{"text":"上一頁(yè)","num":"'+(pageNo-1)+'","status":"abled"}';
}
//判斷分頁(yè)類型
if(count>showNum){
if(pageNo<=showNum+2){
//判斷pageNo是否在要初始化顯示的頁(yè)碼內(nèi)
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"}';
}
}
//選中最后一頁(yè)時(shí)，將省略號(hào)隱藏
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":"下一頁(yè)","num":"'+(pageNo+1)+'","status":"disabled"}]}';
}else{
data+=',{"text":"下一頁(yè)","num":"'+(pageNo+1)+'","status":"abled"}]}';
}
var json_return = JSON.parse(data);
return json_return;
}

注：不必關(guān)注里面的JSON最終要呈現(xiàn)的格式，主要的原因是這些參數(shù)最終是要傳遞到下一個(gè)方法中去渲染分頁(yè)控件，而這些相當(dāng)于是在兩個(gè)方法中約定的，我們主要要關(guān)注的是怎樣對(duì)分頁(yè)控件進(jìn)行類型上的區(qū)別，從而渲染出不同的JSON數(shù)據(jù)

五、jPage.js插件說(shuō)明

這一款插件就是本次教程的一個(gè)最終的產(chǎn)物，這一款插件在實(shí)現(xiàn)方案上面是仿照淘寶的邏輯，但是由于公司的主營(yíng)業(yè)務(wù)與淘寶的業(yè)務(wù)上面有些區(qū)別，所以樣式風(fēng)格不太一致。但是也是能夠很好的滿足一般業(yè)務(wù)上面常見(jiàn)的需求。

具體怎么使用，我們來(lái)舉個(gè)例子

我們要得到這樣的一個(gè)分頁(yè)控件，總數(shù)據(jù)為70條，每頁(yè)顯示3條數(shù)據(jù)，并且要顯示拓展部分，我們只需要如下這樣去調(diào)用就行了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" > 
</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>

最終的效果如下：

這個(gè)簡(jiǎn)單吧大家。接下來(lái)福利來(lái)了，這款插件是開(kāi)源的，不用998，免費(fèi)帶回家(要的請(qǐng)往下看)。

六、插件下載

由于篇幅有限，所以插件的更多用法沒(méi)法在文中體現(xiàn)，但是為了各位同學(xué)可以更好的學(xué)習(xí)使用這一款插件，在這里為大家提供了比較詳細(xì)的文檔說(shuō)明。并且下載的版本相當(dāng)于1.0版本。后期如果時(shí)間允許的話會(huì)對(duì)這款插件做一個(gè)持續(xù)的版本迭代。下載地址，如果覺(jué)得好的話，請(qǐng)為這個(gè)插件點(diǎn)贊。

以上所述是小編給大家介紹的基于Bootstrap仿淘寶分頁(yè)控件實(shí)現(xiàn)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！