$(elementID).paginate() 

$(elementID).paginate({ 
    count:80, 
    start:1, 
    ... }) 

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

注意，关于插件的属性设置，上文已详细介绍，属性count通过PHP计算出总页数$page，该参数由article.php得出。还要说明的是属性onChange：当点击页码时，调用函数，该函数实现了异步提交页码参数给article.php来处理，article.php通过读取数据库里的表书籍，并把得到的文章列表结果而返回页面，这就是Ajax。当然我这里只是做简单的演示，如果需要更多异步效果，可以参照jQuery使用文档。

2、引用CSS:

jPaginate官方提供了导航条样式，你也可以自己写个非常酷的样式。




<link rel="stylesheet" type="text/css" href="style.css" /> 



3、index.php初始页面。

必须要显示一个初始的文章列表，代码如下




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



在ID为pagetxt的DIV内加入PHP代码：




$query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit 0,5"); 
while($row=$db->fetch_array($query)){ 
   $pubdate=date("Y-m-d",$row[pubdate]); 
   echo "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>"; 



4、article.php代码。


该代码用来获取index.php提交过来的页码，查询数据库，并将输出结果。代码如下：




include_once("common.php"); //连接数据库专用文件 
 
$id=$_GET['id']; //获取页码 
$result = $db->select("article", "id", "cata=1"); 
$total = $db->db_num_rows($result); //总记录数 
 
$pagesize=5; //每页显示数 
$page=ceil($total/$pagesize); //总页数 
if(isset($id)){ 
  $startPage=($id-1)*$pagesize; 
  $query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit $startPage, 
$pagesize"); 
  while($row=$db->fetch_array($query)){ 
   $pubdate=date("Y-m-d",$row[pubdate]); 
   echo "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>"; //输出文章列表 
  } 
} 


以上介绍了PHP+jQuery实现Ajax分页效果中jPaginate插件的应用，希望对大家的学习有所帮助。