jPaginate是基于jQuery的動感滾動分頁插件,它的表現形式是像分頁的按鈕一樣,非常有意思的是這些按鈕卻可以滾動,可以通過單擊或鼠標滑向點兩側的小箭頭來控制按鈕的前后滾動。
PHP讀取第一頁數據:
<div id="pagetxt"> <?php $query = mysql_query("select id,title,addtime from article order by id desc limit 0, 6"); while ($row = mysql_fetch_array($query)) { $pubdate = date("Y-m-d", $row['addtime']); echo '<p><span>' . $pubdate . '</span><a href="http://www.49028c.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; } mysql_close(); ?> </div>
jQuery
$("#demo3").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', //設置為'press'時,當鼠標滑向導航箭頭時,頁碼隨之滾動;設置為'slide'時,鼠標單擊一次導航箭頭頁碼滾動一次。 onChange: function(page) { //當單擊頁碼時,回調函數. $("#pagetxt").load("article.php?p=" + page); } });article.php$p = isset($_GET['p']) ? intval($_GET['p']) : ""; $result = mysql_query("select id from article"); $total = mysql_num_rows($result); $pagesize = 6; //每頁顯示數 $page = ceil($total / $pagesize); //總頁數 if ($p) { $startPage = ($p - 1) * $pagesize; $query = mysql_query("select id,title,addtime from article order by id desc limit $startPage, $pagesize"); while ($row = mysql_fetch_array($query)) { $pubdate = date("Y-m-d", $row['addtime']); echo '<p><span>' . $pubdate . '</span><a href="http://www.49028c.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; } }
以上所述就是本文的全部內容了,希望大家能夠喜歡。
新聞熱點
疑難解答