本文例項講述了jQuery從零開始做一個分頁元件功能。分享給大家供大家參考，具體如下：

開始一個元件，毫無目的的寫程式碼是一個不好的習慣，要經歷 分析 => 抽象 => 實現 => 應用 四個階段。

元件DEMO地址：https://github.com/CaptainLiao/zujian/tree/master/pagination

• 分析需求

當前頁碼顯示前後三頁，以及在兩端顯示上一頁、下一頁

未顯示的地方用 ‘...'代替

舉個栗子：

假設總共有30頁

當前為第一頁：1 2 3 4 ... 30 下一頁

當前為第二頁：上一頁 1 2 3 4 5 ... 30 下一頁

當前為第三頁：上一頁 1 2 3 4 5 6 ... 30 下一頁

當前為第6頁：上一頁 1 ... 3 4 5 6 7 8 9 ... 30 下一頁
.

當前為第29頁：上一頁 1 ... 26 27 28 29 30 下一頁

當前為第30頁：上一頁 1 ... 27 28 29 30

• 抽象

分析上面的例子，發現決定輸出的因素有兩個：當前頁碼和總頁數。

於是，我們設定一個函式用來表示當前頁碼的顯示內容：

/**
 * @param {Number} page 當前頁
 * @param {Number} totalPage 總頁數 
 */
function pagination(page,totalPage) {
  var str = '';
  // todo...

  return str;
}

// 執行函式，打印出值

var ret = pagination(4,30)

console.log(ret)

>上一頁 1 2 3 4 5 6 7 ... 30 下一頁

• 實現

輸入和輸出都有了，接著正式開始擼：

function pagination(page,totalPage) {
  var str = page;
  // 這裡實現當前頁面顯示前後三項功能
  for(var i=1; i< totalPage; i++) {
    if(page-i>1) {
      str = page-i +' '+ str;
    }
    if(page + i < totalPage) {
      str = str + ' ' + (page+i)
    }
  }

  // 以page為中心，向左右擴充套件

  // 向左，先判斷當前page向左的第四個數是否大於 1
  if(page-4 > 1) {
    str = '... ' + page;
  }
  // 繼續向左判斷
  if(page >1) {
    str = "上一頁" + '... ' +1 +' ' +str;
  }
  // 向右，判斷當前page向右的第四個數字是否小於 totalPage
  if(page + 4 < totalPage) {
    str = '... '+ str;
  }
  if(page < totalPage) {
    str = str +' ' + totalPage +' '+ '下一頁';
  }
  return str;
}

現在，我們可以執行下面的函式，取得我們想要的結果：

  var total = 30;
  for(var i = 1; i< total; i++) {
   var ret = showPage(i,total);
   console.log(ret)
  }

至此，我們已經實現了分頁的邏輯。

• 應用

接下來的應用就非常簡單了，不外乎是給str 加一些標籤和class，於是我們就得到了一個分頁元件：

HTML:

<ul id="pagination-list" class="clearfix2">

</ul>

javascript:

  function pagination(page,totalPage) {
    var str = '<li class="page-active">'+page+'</li>';
    for(var i=1; i<=3; i++) {
      if(page - i > 1) {
        str = '<li class="page-item">'+(page-i)+'</li>' +' '+ str;
      }
      if(page + i < totalPage) {
        str = str +" "+'<li class="page-item">'+(page+ i)+'</li>'
      }
    }
    if(page-4 >1) {
      str = '<li class="page-item">... </li>' +str;
    }
    if (page >1) {
      str= '<li class="page-up">上一頁</li>'+ ' '+'<li class="page-item">1</li>' +' '+ str;
    }

    if(page+4< totalPage) {
      str = str+ '<li class="page-item"> ...</li>';
    }
    if(page < totalPage) {
      str = str + " " +'<li class="page-item">'+totalPage+'</li>' +" " +'<li class="page-down">下一頁</li>'
    }
    return str;
  }
  var totalPage = 30;

  var str = pagination(1,totalPage);
  var wrap = $("#pagination-list");
  // 這裡引用了 jQuery
  wrap.html(str)
    .on('click','.page-item',function () {
      var cur = parseInt($(this).text());
      wrap.html(pagination(cur,totalPage));
    });

看看效果吧：

目前來說，進展順利，但是！還有很多需要優化的地方：樣式固定，不能自由更改；初始化和互動混雜在一起，沒有對程式碼進行封裝...

又經過一番折騰，這個分頁元件終於完成，下載demo：

https://github.com/CaptainLiao/zujian/tree/master/pagination

現在，我們可以這樣呼叫它：

<script>
  // #pagination-list 是元件的父容器，50 是總頁數。
  $(function () {
    $("#pagination-list").pagination(50);
  })
</script>

是不是很酸爽呢？

如果繼續擴充套件，我們還可以給元件更多的樣式選擇......

更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery擴充套件技巧總結》、《jQuery常用外掛及用法總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷演算法與技巧總結》、《jQuery常見經典特效彙總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程式設計有所幫助。