一、前言：
分頁功能在項目中時常用到，一款可以快速實現分頁功能的插件非常有必要，pagination--這款插件功能非常完美，幾乎我所有項目中使用到分頁的地方都會第一時間考慮到這個插件，但是其實有能力的同學最好還是使用原生的JS或者JQuery來開發分頁功能，畢竟插件很多源碼比較複雜，也並不是所有功能都做到盡善盡美，僅僅是提供一個方便而已。
二、具體使用方法：
（1）第一步，導入jquery和pagination.js
<script src="jquery.js"></script>
<script src="jquery.pagination.js"></script>
（2）第二步，HTML代碼：
非常簡單隻需要一個div標籤
<div class="M-box"></div>
（3）第三步, JS代碼：
$('.M-box').pagination({
pageCount:50,
jump:true,
coping:true,
homePage:'首頁',
endPage:'末頁',
prevContent:'上頁',
nextContent:'下頁'
});
如圖所示：
三、核心參數方法
使用方法是：
$('.M-box').pagination({option})
option的參數如下:
| pageCount | 9 | 總頁數 |
| totalData | 0 | 數據總條數 |
| current | 1 | 當前第幾頁 |
| showData | 0 | 每頁顯示的條數 |
| prevCls | 'prev' | 上一頁class |
| nextCls | 'next' | 下一頁class |
| prevContent | '<' | 上一頁節點內容 |
| nextContent | '>' | 下一頁節點內容 |
| activeCls | 'active' | 當前頁選中狀態class名 |
| count | 3 | 當前選中頁前後頁數 |
| coping | false | 是否開啓首頁和末頁，值爲boolean |
| isHide | false | 總頁數爲0或1時隱藏分頁控件 |
| keepShowPN | false | 是否一直顯示上一頁下一頁 |
| homePage | '' | 首頁節點內容，默認爲空 |
| endPage | '' | 尾頁節點內容，默認爲空 |
| jump | false | 是否開啓跳轉到指定頁數，值爲boolean類型 |
| jumpIptCls | 'jump-ipt' | 文本框內容 |
| jumpBtnCls | 'jump-btn' | 跳轉按鈕class |
| jumpBtn | '跳轉' | 跳轉按鈕文本內容 |
| callback | function(){} | 回調函數，參數"index"爲當前頁 |
其中回調函數是最核心的參數，即點擊分頁的數字按鈕時所執行的操作，回調函數中有一個參數叫api
callback:function(api){
//回調函數。。。
}
該api接口的方法有如下：
方法 參數 說明
getPageCount() 無 獲取總頁數
setPageCount(page) page：頁數 設置總頁數
getCurrent() 無 獲取當前頁
filling() 無 填充數據，參數爲頁數
四、AJAX動態分頁
其實做分頁最主要的就是通過AJAX來動態獲取數據後進行分頁顯示，我們要明白的是，爲什麼分頁？？
首頁，因爲數據庫的數據是不可估量的，如果某一個系統的數據庫數據有幾千條甚至幾萬條，難道一個網頁要把全部的數據都全部的展示出來嗎？？那肯定是不合理的，因爲這非常消耗系統內存和網絡帶寬，我們肯定都是在AJAX請求數據時，傳入了要顯示的條數和頁數，服務器在根據條數和頁數返回數據給我們，比如我們要顯示10條數據，顯示第一頁的內容，那服務器就相應的把該條件下的數據傳回給我們，僅僅10條，這對於數據庫和網頁顯示來說毫無壓力。所以這就有了分頁功能的出現。如果有50條數據，每頁只顯示10條數據，那理所當然的就是有5頁了，那問題又來了，難道這個分頁怎麼知道我每個頁數需要顯示什麼內容呢？？？是我全部加載數據後平均分配到每一頁10條數據，然後依次顯示下去嗎？？當然不是，我每當點擊頁數按鈕的時候都要去加載數據，重新發起AJAX請求到服務器，然後返回數據給我們，那我們就大概知道怎麼使用這個分頁功能了！！
（1）.首頁，你得知道你分頁按鈕上需要顯示幾頁嗎？？例如5頁的話就是5個按鈕。
所以首先必須使用AJAX請求得到所有數據的長度是多少，例如： 總共50條數據，我需要每頁顯示10條數據，當前 顯示第一頁的數據。
$.ajax({
url:...
type:"post",
data:{
rows: 10 //我把行數傳回給服務器中
page:1 //顯示第一頁的數據
}
success:function(data){
//data.length 就是數據的長度 ，也就是上面的10，具體參數名看你們服務器的返回叫什麼
//data.count 是數據的總長度，也就是50，具體參數名看你們服務器的返回叫什麼
}
})
（2）.然後我在success方法中寫入pagination的方法進行分頁
$.ajax({
url:...
type:"post",
data:{
rows: 10 //我把行數傳回給服務器中
page:1 //顯示第一頁的數據
}
success:function(data){
//獲取總條數
var sumCount=data.count;
//獲取返回的條數
var count=data.length;
//重要的一步來了，需要獲取我們按鈕的個數，也就是分多少頁，需要總條數除以返回數在向上取整
var pageCount=Math.ceil(sumCount/count); //這裏50除以10等於5，所以一共有5頁
$('.M-box').pagination({
pageCount:pageCount, //總頁數
coping:true,//是否開啓首頁和尾頁
homePage:'首頁',
endPage:'末頁',
prevContent:'上頁',
nextContent:'下頁',
current:1, //當前第幾頁
callback:function(api){ //按鈕、回調函數
}
})；
}
})
（3）.現在最最關鍵的來了，就是分頁中的回調函數的操作，也就是點擊按鈕需要做什麼？？上面第四點中分析到，點擊按鈕需要重新發起AJAX請求，需要把顯示條數和當前的頁數傳回給服務器
$.ajax({
url:...
type:"post",
data:{
rows: 10 //我把行數傳回給服務器中
page:1 //顯示第一頁的數據
}
success:function(data){
//獲取總條數
var sumCount=data.count;
//獲取返回的條數
var count=data.length;
//獲取分頁數
var pageCount=Math.ceil(sumCount/count); //這裏50除以10等於5，所以一共有5頁
$('.M-box').pagination({
pageCount:pageCount, //總頁數
coping:true,//是否開啓首頁和尾頁
homePage:'首頁',
endPage:'末頁',
prevContent:'上頁',
nextContent:'下頁',
current:1, //當前第幾頁
callback:function(api){ //按鈕、回調函數
//再次發起AJAX請求
$.ajax({
url:...
type:"post",
data:{
rows: 10, //依然顯示10條數據
page: api.getCurrent()// 非常關鍵的一步，這裏就要用到api接口的方法中獲取當前頁
的方法了，比如我點擊第二頁，當前頁就是2，點擊第三頁，
當前頁就是3,
}
success:function(data){
//ajax成功後的回調。。。
}
})
}
})；
}
})
以上基本的一個流程就是這樣。具體一些api方法和參數可以去試試。
一個很主要的流程就是，首先要發起ajax得到總條數和返回的條數然後在success回調中使用pagination的方法，在callback回調中再次發起ajax，就是爲了點擊分頁按鈕再次顯示數據。
推薦pagination插件下載地址：http://download.csdn.net/detail/baidu_25343343/9822636