PHP+jQuery+Ajax實(shí)現(xiàn)分頁(yè)效果 jPaginate插件的應(yīng)用

更新時(shí)間：2015年10月09日 10:16:53 投稿：lijiao

這篇文章主要介紹了PHP+jQuery+Ajax實(shí)現(xiàn)分頁(yè)效果，以及jPaginate插件的應(yīng)用

jPaginate是基于jQuery的動(dòng)感滾動(dòng)分頁(yè)插件，它的表現(xiàn)形式是像分頁(yè)的按鈕一樣，非常有意思的是這些按鈕卻可以滾動(dòng)，可以通過(guò)單擊或鼠標(biāo)滑向點(diǎn)兩側(cè)的小箭頭來(lái)控制按鈕的前后滾動(dòng)。

調(diào)用jPaginate插件的方法很簡(jiǎn)單：

$(elementID).paginate()

屬性設(shè)置
可喜的是，jPaginate提供了很多屬性配置，您可以輕易的定制想要的分頁(yè)效果。
設(shè)置方法如：

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

count: 數(shù)字，總記錄數(shù)。
start: 數(shù)字，開始顯示的頁(yè)數(shù)，如：3表示從第3頁(yè)開始。
display: 數(shù)字，分頁(yè)條顯示的頁(yè)數(shù)，如：5表示一次顯示5個(gè)頁(yè)碼數(shù)。
border: 是否顯示頁(yè)碼的邊框。(true/false)
border_color: 設(shè)置邊框的顏色，如"#d3d3d3"。
text_color: 設(shè)置頁(yè)碼的顏色，如"#68ba64"。
background_color: 設(shè)置頁(yè)碼的背景色，如"#f7f7f7"。
border_hover_color: 設(shè)置鼠標(biāo)滑向頁(yè)碼時(shí)頁(yè)碼邊框的顏色。
text_hover_color: 設(shè)置鼠標(biāo)滑向頁(yè)碼時(shí)頁(yè)碼的顏色。
background_hover_color: 設(shè)置鼠標(biāo)滑向頁(yè)碼時(shí)頁(yè)碼背景的顏色。
images: 是否顯示頁(yè)碼導(dǎo)航箭頭（方向箭頭）(true/false)
mouse: 設(shè)置為'press'時(shí)，當(dāng)鼠標(biāo)滑向?qū)Ш郊^時(shí)，頁(yè)碼隨之滾動(dòng)；設(shè)置為'slide'時(shí)，鼠標(biāo)單擊一次導(dǎo)航箭頭頁(yè)碼滾動(dòng)一次。
onChange: 當(dāng)單擊頁(yè)碼時(shí)，回調(diào)函數(shù).
實(shí)例應(yīng)用：PHP+jQuery實(shí)現(xiàn)Ajax分頁(yè)效果
首先準(zhǔn)備index.php，該頁(yè)面用來(lái)分頁(yè)展示一個(gè)博客文章列表。
1、引用JS:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.paginate.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $("#demo").paginate({ 
    count    : <?php echo $page;?>, 
    start    : 1, 
    display   : 5, 
    border         : true, 
    border_color      : '#BEF8B8', 
    text_color       : '#79B5E3', 
    background_color    : '#E3F2E1',   
    border_hover_color   : '#68BA64', 
    text_hover_color    : '#2573AF', 
    background_hover_color : '#CAE6C6', 
    images         : false, 
    mouse          : 'press', 
    onChange        : function(page){ 
                  $("#pagetxt").load("article.php?id="+page); 
                 } 
  }); 
}); 
</script>

注意，關(guān)于插件的屬性設(shè)置，上文已詳細(xì)介紹，屬性count通過(guò)PHP計(jì)算出總頁(yè)數(shù)$page，該參數(shù)由article.php得出。還要說(shuō)明的是屬性onChange：當(dāng)點(diǎn)擊頁(yè)碼時(shí)，調(diào)用函數(shù)，該函數(shù)實(shí)現(xiàn)了異步提交頁(yè)碼參數(shù)給article.php來(lái)處理，article.php通過(guò)讀取數(shù)據(jù)庫(kù)里的表書籍，并把得到的文章列表結(jié)果而返回頁(yè)面，這就是Ajax。當(dāng)然我這里只是做簡(jiǎn)單的演示，如果需要更多異步效果，可以參照jQuery使用文檔。
2、引用CSS:
jPaginate官方提供了導(dǎo)航條樣式，你也可以自己寫個(gè)非?？岬臉邮?。

<link rel="stylesheet" type="text/css" href="style.css" />

3、index.php初始頁(yè)面。
必須要顯示一個(gè)初始的文章列表，代碼如下

<div class="demo"> 
  <h4>Demo 3： Php+jQuery實(shí)現(xiàn)AJAX 分頁(yè)效果</h4> 
  <div id="pagetxt"> 
    
  </div> 
  <div id="demo"></div> 
</div>

在ID為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 "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>";

4、article.php代碼。

該代碼用來(lái)獲取index.php提交過(guò)來(lái)的頁(yè)碼，查詢數(shù)據(jù)庫(kù)，并將輸出結(jié)果。代碼如下：

include_once("common.php"); //連接數(shù)據(jù)庫(kù)專用文件 
 
$id=$_GET['id']; //獲取頁(yè)碼 
$result = $db->select("article", "id", "cata=1"); 
$total = $db->db_num_rows($result); //總記錄數(shù) 
 
$pagesize=5; //每頁(yè)顯示數(shù) 
$page=ceil($total/$pagesize); //總頁(yè)數(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 "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>"; //輸出文章列表 
  } 
}

以上介紹了PHP+jQuery實(shí)現(xiàn)Ajax分頁(yè)效果中jPaginate插件的應(yīng)用，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: