jQuery插件jPaginate實現(xiàn)無刷新分頁

更新時間：2015年05月04日 16:11:32 投稿：hebedich

我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。

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

PHP讀取第一頁數(shù)據(jù)：

<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.dhdzp.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; 
  } 
  mysql_close(); 
  ?> 
</div>

jQuery

$("#demo3").paginate({ 
  count: <?php echo $page; ?>, //總記錄數(shù) 
  start: 1, //開始顯示的頁數(shù) 
  display: 5, //分頁條顯示的頁數(shù) 
  border: true, //是否顯示頁碼的邊框 
  border_color: '#BEF8B8', //設(shè)置邊框的顏色 
  text_color: '#79B5E3', //設(shè)置頁碼的顏色 
  background_color: '#E3F2E1', //設(shè)置頁碼的背景色 
  border_hover_color: '#68BA64', //設(shè)置鼠標(biāo)滑向頁碼時頁碼邊框的顏色 
  text_hover_color: '#2573AF', //設(shè)置鼠標(biāo)滑向頁碼時頁碼的顏色 
  background_hover_color: '#CAE6C6', //設(shè)置鼠標(biāo)滑向頁碼時頁碼背景的顏色 
  images: false, //是否顯示頁碼導(dǎo)航箭頭 
  mouse: 'press', //設(shè)置為'press'時，當(dāng)鼠標(biāo)滑向?qū)Ш郊^時，頁碼隨之滾動；設(shè)置為'slide'時，鼠標(biāo)單擊一次導(dǎo)航箭頭頁碼滾動一次。 
  onChange: function(page) { //當(dāng)單擊頁碼時，回調(diào)函數(shù). 
  $("#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; //每頁顯示數(shù) 
$page = ceil($total / $pagesize); //總頁數(shù) 
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.dhdzp.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; 
  } 
}

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: