PHP+jPaginate插件製做無刷新分頁實例

jPaginate是一款動感滾動分頁插件，它的表現形式是像分頁的按鈕同樣，有意思的是這些按鈕卻能夠左右滾動，能夠經過單擊或
鼠標滑向點兩側的小箭頭來控制按鈕的左右滾動。

讀取第一頁數據：

 1 <div id="pagetxt"> 
 2     <?php 
 3     $query = mysql_query("select id,title,addtime from article order by id desc limit 0, 6"); 
 4     while ($row = mysql_fetch_array($query)) { 
 5         $pubdate = date("Y-m-d", $row['addtime']); 
 6         echo '<p><span>' . $pubdate . '</span><a href="http://www.sucaihuo.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; 
 7     } 
 8     mysql_close(); 
 9     ?> 
10 </div>

 

分頁參數：

 1 $("#demo3").paginate({ 
 2     count: <?php echo $page; ?>, //總記錄數 
 3     start: 1, //開始顯示的頁數 
 4     display: 5, //分頁條顯示的頁數 
 5     border: true, //是否顯示頁碼的邊框 
 6     border_color: '#BEF8B8', //設置邊框的顏色 
 7     text_color: '#79B5E3', //設置頁碼的顏色 
 8     background_color: '#E3F2E1', //設置頁碼的背景色 
 9     border_hover_color: '#68BA64', //設置鼠標滑向頁碼時頁碼邊框的顏色 
10     text_hover_color: '#2573AF', //設置鼠標滑向頁碼時頁碼的顏色 
11     background_hover_color: '#CAE6C6', //設置鼠標滑向頁碼時頁碼背景的顏色 
12     images: false, //是否顯示頁碼導航箭頭 
13     mouse: 'press', //設置爲'press'時，當鼠標滑嚮導航箭頭時，頁碼隨之滾動；設置爲'slide'時，鼠標單擊一次導航箭頭頁碼滾動一次。 
14     onChange: function(page) { //當單擊頁碼時，回調函數. 
15     $("#pagetxt").load("article.php?p=" + page); 
16     } 
17 });

 

article.php代碼：

 1 $p = isset($_GET['p']) ? intval($_GET['p']) : ""; 
 2  
 3 $result = mysql_query("select id from article"); 
 4 $total = mysql_num_rows($result); 
 5  
 6 $pagesize = 6; //每頁顯示數 
 7 $page = ceil($total / $pagesize); //總頁數 
 8 if ($p) { 
 9     $startPage = ($p - 1) * $pagesize; 
10     $query = mysql_query("select id,title,addtime from article order by id desc limit $startPage, $pagesize"); 
11     while ($row = mysql_fetch_array($query)) { 
12         $pubdate = date("Y-m-d", $row['addtime']); 
13         echo '<p><span>' . $pubdate . '</span><a href="http://www.sucaihuo.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; 
14     } 
15 }

 

本文轉自：https://www.sucaihuo.com/php/95.html 轉載請註明出處！