一、前言

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

四、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，就是為了點選分頁按鈕再次顯示資料。

• jqpaginator分頁外掛學習