php无刷新-漂亮的分页插件-JPAGINATE

原创

Q神 2022-12-16 13:32:59 博主文章分类：php ©著作权

文章标签 mysql html jquery 文章分类 运维

©著作权归作者所有：来自51CTO博客作者Q神的原创作品，请联系作者获取转载授权，否则将追究法律责任

官网：jquery.paginate.js，style.css

http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/comment-page-5/

使用分页插件我们可以只关注从后台获取总页数和计算当前页数，而不需要去关心怎么显示页码，什么时候该显示哪些页码，该隐藏哪些代码。这样便给我们开发人员带来了很多的方便。

那么JPAGINATE不但给我们提供了这样一种分页的形式，还让分页有了动画的效果。通过滑动显示当前页码左右一定范围的页码。

index.php代码：

<?php include_once("article.php");?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>演示：PHP+jQuery实现Ajax分页效果</title>
 <meta name="keywords" content="jPaginate, jquery插件" />
 <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.paginate.js"></script>
 <script type="text/javascript">
 $(function(){


$("#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',
onChange     : function(page){
$("#pagetxt").load("article.php?id="+page);
                                           }
});
$("#pagetxt").ajaxSend(function(event, request, settings){
         $(this).html("<img src='loading.gif' /> 正在读取。。。");
     });
 });
 </script>


 </head>


 <body>

<div class="demo">
     <h4>Demo 3： Php+jQuery实现AJAX 分页效果</h4>
     <div id="pagetxt">
       <?php 


 $query=mysql_query("select id from userinfo order by id desc limit 0, 6");
 while($row=mysql_fetch_array($query)){

     echo '<p>'.$row['id'].'</p>';
 }
 mysql_close();
 ?>
     </div>
     <div id="demo3"></div>
 </div>




 </body>
 </html>

article.php代码：

<?php
 $host="localhost";
 $db_user="root";//数据库用户名
 $db_pass="root";//密码
 $db_name="job123";//数据库名称
 $timezone="Asia/Shanghai";


 $link=mysql_connect($host,$db_user,$db_pass);
 mysql_select_db($db_name,$link);
 mysql_query("SET names UTF8");


 date_default_timezone_set($timezone); //北京时间


 $id = $_GET['id'];
 $result = mysql_query("select id from userinfo");
 $total = mysql_num_rows($result);


 $pagesize=6; //每页显示数
 $page=ceil($total/$pagesize); //总页数
 if(isset($id)){
    $startPage=($id-1)*$pagesize;
    $query = mysql_query("select id from userinfo order by id desc limit $startPage, $pagesize");
    while($row=mysql_fetch_array($query)){
echo '<p>'.$row['id'].'</p>';
    }
 }


 ?>