PHP+jQuery怎么實(shí)現(xiàn)Ajax分頁效果

這篇文章主要講解了“PHP+jQuery怎么實(shí)現(xiàn)Ajax分頁效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“PHP+jQuery怎么實(shí)現(xiàn)Ajax分頁效果”吧！

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

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

$(elementID).paginate()

屬性設(shè)置

可喜的是，jPaginate提供了很多屬性配置，您可以輕易的定制想要的分頁效果。

設(shè)置方法如：

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

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

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

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

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

border_color: 設(shè)置邊框的顏色，如"#d3d3d3"。

text_color: 設(shè)置頁碼的顏色，如"#68ba64"。

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

border_hover_color: 設(shè)置鼠標(biāo)滑向頁碼時(shí)頁碼邊框的顏色。

text_hover_color: 設(shè)置鼠標(biāo)滑向頁碼時(shí)頁碼的顏色。

background_hover_color: 設(shè)置鼠標(biāo)滑向頁碼時(shí)頁碼背景的顏色。

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

mouse: 設(shè)置為'press'時(shí)，當(dāng)鼠標(biāo)滑向?qū)Ш郊^時(shí)，頁碼隨之滾動(dòng)；設(shè)置為'slide'時(shí)，鼠標(biāo)單擊一次導(dǎo)航箭頭頁碼滾動(dòng)一次。

onChange: 當(dāng)單擊頁碼時(shí)，回調(diào)函數(shù).

實(shí)例應(yīng)用：PHP+jQuery實(shí)現(xiàn)Ajax分頁效果

首先準(zhǔn)備index.php，該頁面用來分頁展示一個(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通過PHP計(jì)算出總頁數(shù)$page，該參數(shù)由article.php得出。還要說明的是屬性onChange：當(dāng)點(diǎn)擊頁碼時(shí)，調(diào)用函數(shù)，該函數(shù)實(shí)現(xiàn)了異步提交頁碼參數(shù)給article.php來處理，article.php通過讀取數(shù)據(jù)庫里的表書籍，并把得到的文章列表結(jié)果而返回頁面，這就是Ajax。當(dāng)然我這里只是做簡單的演示，如果需要更多異步效果，可以參照jQuery使用文檔。

2、引用CSS:

jPaginate官方提供了導(dǎo)航條樣式，你也可以自己寫個(gè)非?？岬臉邮健?/p>

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

3、index.php初始頁面。

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

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

在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代碼。

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

include_once("common.php"); //連接數(shù)據(jù)庫專用文件 $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 "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> ".$row[title]."</a></p>"; //輸出文章列表   } }

感謝各位的閱讀，以上就是“PHP+jQuery怎么實(shí)現(xiàn)Ajax分頁效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對PHP+jQuery怎么實(shí)現(xiàn)Ajax分頁效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！