PHP+jquery+ajax实现分页

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

HTML

CSS

Box-shadow:1px 1px 2px rgba(0,.2); -webkit-Box-shadow:1px 1px 2px rgba(0,.2); Box-shadow:1px 1px 2px rgba(0,.2);}

jQuery

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

页码 var total,pageSize,totalPage; //总记录数，每页显示数，总页数

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

获取数据 function getData(page){ $.ajax({ type: 'POST',url: 'pages.PHP',data: {'pageNum':page-1},dataType:'json',beforeSend:function(){ $("#list ul").append("

");//显示加载动画 },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表结构

sql;"> CREATE TABLE IF NOT EXISTS `food` ( `id` int(11) NOT NULL AUTO_INCREMENT,`title` varchar(100) NOT NULL,`pic` varchar(255) NOT NULL,PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

精彩专题分享：

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

原文链接：https://www.f2er.com/ajax/43730.html

PHP+jquery+ajax实现分页

jQuery

PHP

猜你在找的Ajax相关文章