一、前言：

分頁功能在專案中時常用到，一款可以快速實現分頁功能的外掛非常有必要，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的引數如下:

其中回撥函式是最核心的引數，即點選分頁的數字按鈕時所執行的操作，回撥函式中有一個引數叫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