jPaginate是基于jQuery的動感滾動分頁插件，它的表現形式是像分頁的按鈕一樣，非常有(yǒu)意思的是這些(xiē)按鈕卻可(kě)以滾動，可(kě)以通(tōng)過單擊或鼠标滑向點兩側的小(xiǎo)箭頭來(lái)控制(zhì)按鈕的前後滾動。

調用jPaginate插件的方法很(hěn)簡單：

$(elementID).paginate()

屬性設置

可(kě)喜的是，jPaginate提供了很(hěn)多(duō)屬性配置，您可(kě)以輕易的定制(zhì)想要的分頁效果。

設置方法如：

$(elementID).paginate({
      count:80,
      start:1,
      ...
 })

count: 數(shù)字，總記錄數(shù)。

start: 數(shù)字，開(kāi)始顯示的頁數(shù)，如：3表示從第3頁開(kāi)始。

display: 數(shù)字，分頁條顯示的頁數(shù)，如：5表示一次顯示5個(gè)頁碼數(shù)。

border: 是否顯示頁碼的邊框。(true/false)

border_color: 設置邊框的顔色，如"#d3d3d3"。

text_color: 設置頁碼的顔色，如"#68ba64"。

background_color: 設置頁碼的背景色，如"#f7f7f7"。

border_hover_color: 設置鼠标滑向頁碼時(shí)頁碼邊框的顔色。

text_hover_color: 設置鼠标滑向頁碼時(shí)頁碼的顔色。

background_hover_color: 設置鼠标滑向頁碼時(shí)頁碼背景的顔色。

images: 是否顯示頁碼導航箭頭（方向箭頭）(true/false)

mouse: 設置為(wèi)'press'時(shí)，當鼠标滑向導航箭頭時(shí)，頁碼随之滾動；設置為(wèi)'slide'時(shí)，鼠标單擊一次導航箭頭頁碼滾動一次。

onChange: 當單擊頁碼時(shí)，回調函數(shù).

實例應用：PHP+jQuery實現Ajax分頁效果

首先準備index.php，該頁面用來(lái)分頁展示一個(gè)博客文章列表。

1、引用JS:

注意，關于插件的屬性設置，上(shàng)文已詳細介紹，屬性count通(tōng)過PHP計(jì)算(suàn)出總頁數(shù)$page，該參數(shù)由article.php得(de)出。還(hái)要說明(míng)的是屬性onChange：當點擊頁碼時(shí)，調用函數(shù)，該函數(shù)實現了異步提交頁碼參數(shù)給article.php來(lái)處理(lǐ)，article.php通(tōng)過讀取數(shù)據庫裏的表書(shū)籍，并把得(de)到的文章列表結果而返回頁面，這就是Ajax。當然我這裏隻是做(zuò)簡單的演示，如果需要更多(duō)異步效果，可(kě)以參照jQuery使用文檔。

2、引用CSS:

jPaginate官方提供了導航條樣式，你(nǐ)也可(kě)以自己寫個(gè)非常酷的樣式。

3、index.php初始頁面。

必須要顯示一個(gè)初始的文章列表，代碼如下

	
	

		Demo 3： Php+jQuery實現AJAX 分頁效果
	

	

		
	

	

		
	

在ID為(wèi)pagetxt的DIV內(nèi)加入PHP代碼：

$query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit 0,5");
while($row=$db->fetch_array($query)){
	 $pubdate=date("Y-m-d",$row[pubdate]);
     echo "

	$pubdate ".$row[title]."

";

4、article.php代碼。

該代碼用來(lái)獲取index.php提交過來(lái)的頁碼，查詢數(shù)據庫，并将輸出結果。代碼如下：

include_once("common.php"); //連接數(shù)據庫專用文件

$id=$_GET['id']; //獲取頁碼
$result = $db->select("article", "id", "cata=1");
$total = $db->db_num_rows($result); //總記錄數(shù)

$pagesize=5; //每頁顯示數(shù)
$page=ceil($total/$pagesize); //總頁數(shù)
if(isset($id)){
   $startPage=($id-1)*$pagesize;
   $query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit $startPage, 
$pagesize");
   while($row=$db->fetch_array($query)){
     $pubdate=date("Y-m-d",$row[pubdate]);
     echo "

	$pubdate ".$row[title]."

"; //輸出文章列表
   }
}