jQuery插件jPaginate实现无刷新分页

前端技术 2023/09/01 JavaScript

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.phpstudy.net/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.phpstudy.net/js/\' . $row[\'id\'] . \'.html\" target=\"_blank\">\' . $row[\'title\'] . \'</a></p>\'; 
  } 
}

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/3152

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案