快捷導(dǎo)航

jQuery插件jPaginate實(shí)現(xiàn)無(wú)刷新分頁(yè)

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

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

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

PHP讀取第一頁(yè)數(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.fzitv.net/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; 
  } 
  mysql_close(); 
  ?> 
</div>

jQuery

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

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

您可能感興趣的文章: