PHP+jquery+ajax实现分页

发布时间：2020-12-15 23:22:39 所属栏目：百科来源：网络整理

导读：本文实例为大家分享了jquery ajax实现分页的具体代码，供大家参考，具体内容如下 HTML CSS jQuery 我们先声明变量，后面的代码要用到以下变量。接下来，我们自定义一个函数：getData()，用来获取当前页数据。函数中，我们利用$.ajax()向后台pages.php发送PO

本文实例为大家分享了jquery ajax实现分页的具体代码，供大家参考，具体内容如下

HTML

CSS

jQuery

我们先声明变量，后面的代码要用到以下变量。

接下来，我们自定义一个函数：getData()，用来获取当前页数据。函数中，我们利用$.ajax()向后台pages.php发送POST异步请求，将当前页码以JSON格式传递给后台。

loading...");//显示加载动画 },success:function(json){ $("#list ul").empty();//清空数据区 total = json.total; //总记录数 pageSize = json.pageSize; //每页显示条数 curPage = page; //当前页 totalPage = json.totalPage; //总页数 var li = ""; var list = json.list; $.each(list,function(index,array){ //遍历json数据列 li += "

"+array['title'] +"

"; }); $("#list ul").append(li); },complete:function(){ //生成分页条 getPageBar(); 　　　　　　　　　　　　　　　　　　　　　　当点击分页条中的分页链接时，调用getData(page)加载对应页码的数据。　　　　　　　　　　　　　　$("#pagecount span a").on('click',function(){ 　　　　　　 var rel = $(this).attr("rel"); 　　　　　　if(rel){ 　　　　 getData(rel); 　　　　　　} 　　　　　　　　 }); 　　 },error:function(){ alert("数据加载失败"); } }); }

请求成功后并返回数据，将相应的数据附给变量，并将返回的商品数据列表循环展示到对应容器#list ul中。当数据完全加载完毕后，调用分页条函数getPageBar()生成分页条。

totalPage) curPage=totalPage; //页码小于1 if(curPage<1) curPage=1; pageStr = "共"+total+"条"+curPage +"/"+totalPage+"";

//如果是第一页
if(curPage==1){
pageStr += "首页上一页";
}else{
pageStr += "首页
上一页";
}

//如果是最后页
if(curPage>=totalPage){
pageStr += "下一页尾页";
}else{
pageStr += "
下一页尾页
";
}

$("#pagecount").html(pageStr);
}

最后，当页面第一次加载时，我们加载第一页数据即getData(1)，

});

PHP

pages.php接收每次前端页面的ajax请求，根据提交的页码pageNum值，从mysql数据库中获取数据，计算总记录数和总页数，读取对应页码下的数据列表，并将最终结果以JSON格式返回给前端页面。

$page = intval($_POST['pageNum']); //当前页

$result = mysql_query("select id from food");
$total = mysql_num_rows($result);//总记录数
$pageSize = 6; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数

$startPage = $page*$pageSize; //开始记录
//构造数组
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,title,pic from food order by id asc limit
$startPage,$pageSize"); //查询分页数据
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'id' => $row['id'],'title' => $row['title'],'pic' => $row['pic'],);
}
echo json_encode($arr); //输出JSON数据

最后，附上Mysql表结构

精彩专题分享：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!