jquery ajax php+mysql 无刷新分页 详细实例
2013-08-05 21:13
651 查看
最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧。
首先是html页面,index.html,代码如下:
样式我随便写的,毕竟我样式写的很差,大家可以自己换样式的。
然后就是js代码了,ajaxPager.js,代码如下:
因为项目的需要,我这个页面页数显示只能显示几页,比如就这样 << < ... 5 6 7 ... > >>,要改显示的,就在ajaxPager.js里面改。
$.ajax({ 中url: 'pages.php',处理就在pages.php中处理。那么就来看看pages.php中的代码:
上面当然还有数据库连接了啦,这个应该很简单吧,还是贴出来connect.php:
然后就完成了,具体思路很清晰,点击页数的时候jquery获取rel中的页面值,传进去数据库获取相应数据展现在页面上。
然后还有数据库吧,我的表示这样的:
我这边有一个demo,然后大家可以下载看看。多多指教。
http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903
首先是html页面,index.html,代码如下:
<!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+mysql+ajax+jquery分页</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="ajaxPager.js"></script> <style> #main{ width:980px; margin:0px auto; } ul { list-style:none; margin:0px; } #list li{ width:220px; height:280px; float:left; margin-left:10px; } .pager .cur { border-top-color: rgb(255, 255, 255); border: 1px solid #fff; background: 0; font-weight: bold; color: #000; } .pager a, .pager span { margin-top: 5px; } .pager a, .pager span { background: none repeat scroll 0 0 #fff; border: 1px solid #e7ecf0; color: #0000cd; float: left; height: 22px; line-height: 22px; margin-right: 5px; overflow: hidden; text-align: center; text-decoration: none; width: auto; padding: 0 8px; } .pager span { background: none repeat scroll 0 0 #fff; border: 1px solid #e7ecf0; color: #0000cd; float: left; height: 22px; line-height: 22px; margin-right: 5px; overflow: hidden; text-align: center; text-decoration: none; width: auto; padding: 0 8px; } .pager { border-top: 0; padding: 12px 0 30px 15px; float: left; } .clearfix { display: block; } .pager { float: left; font-family: Arial; font-size: 13px; } .clearfix { zoom: 1; } </style> </head> <body> <div id="main"> <div id="pagecount" class="pager clearfix"></div><div id="loading"></div> <br /> <br /> <br /> <br /> <div id="list"> <ul></ul> </div> </div> </body> </html>
样式我随便写的,毕竟我样式写的很差,大家可以自己换样式的。
然后就是js代码了,ajaxPager.js,代码如下:
var curPage = 1; //当前页码 var total,pageSize,totalPage; //获取数据 function getData(page){ $.ajax({ type: 'POST', url: 'pages.php', data: {'pageNum':page-1}, dataType:'json', beforeSend:function(){ $("#loading").html("<img id='loadin'g src='loading.gif'>"); }, success:function(json){ $("#loading").html(""); $("#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 += "<li><a href='#'><img src='"+array['pic']+"'></a><p>"+array['title'].substring(0,10)+"</p></li>"; }); $("#list ul").append(li); }, complete:function(){ //生成分页条 getPageBar(); }, error:function(){ alert("数据加载失败"); } }); } //获取分页条 function getPageBar(){ //页码大于最大页数 if(curPage>totalPage) curPage=totalPage; //页码小于1 if(curPage<1) curPage=1; pageStr = "<span class=''>共"+total+"条"+curPage+"/"+totalPage+"</span>"; //如果是第一页 if(totalPage<=4) { if(curPage==1){ pageStr += "<span class='cur'>1</span>"; for(var i=2;i<=totalPage;i++) { pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"; } }else{ pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"; for(var i=1;i<=totalPage;i++) { if(i==curPage) { pageStr += "<span class='cur'>"+i+"</span>" } else { pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"; } } } } else//当页数大于5的时候就要这样显示1 2 3 4 ... { if(curPage<=3){ if(curPage==1) { pageStr += "<span class='cur'>1</span>"; } else { pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"; pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>"; } for(var i=2;i<=4;i++) { if(i==curPage) { pageStr += "<span class='cur'>"+i+"</span>" } else { pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"; } } pageStr += "<span class='cur'>...</span>"; }else{ pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"; pageStr += "<span class='cur'>...</span>"; if(curPage>totalPage-2) { for(var i=totalPage-2;i<=totalPage;i++) { if(i==curPage) { pageStr += "<span class='cur'>"+i+"</span>" } else { pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"; } } } else { pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>"; pageStr += "<span class='cur'>"+curPage+"</span>"; pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>"; pageStr += "<span class='cur'>...</span>"; } } } //如果是最后页 if(curPage>=totalPage){ //pageStr += "<span>></span> <span>>></span>"; }else{ pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>"; } $("#pagecount").html(pageStr); } $(function(){ getData(1); $("#pagecount a").live('click',function(){ var rel = $(this).attr("rel"); if(rel){ getData(rel); } }); });
因为项目的需要,我这个页面页数显示只能显示几页,比如就这样 << < ... 5 6 7 ... > >>,要改显示的,就在ajaxPager.js里面改。
$.ajax({ 中url: 'pages.php',处理就在pages.php中处理。那么就来看看pages.php中的代码:
<?php include_once('connect.php'); $page = intval($_POST['pageNum']); $result = mysql_query("select id from food"); $total = mysql_num_rows($result);//总记录数 $pageSize = 8; //每页显示数 $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'], ); } //print_r($arr); echo json_encode($arr); ?>
上面当然还有数据库连接了啦,这个应该很简单吧,还是贴出来connect.php:
<?php include_once('connect.php'); $page = intval($_POST['pageNum']); $result = mysql_query("select id from food"); $total = mysql_num_rows($result);//总记录数 $pageSize = 8; //每页显示数 $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'], ); } //print_r($arr); echo json_encode($arr); ?>
然后就完成了,具体思路很清晰,点击页数的时候jquery获取rel中的页面值,传进去数据库获取相应数据展现在页面上。
然后还有数据库吧,我的表示这样的:
1 CREATE TABLE IF NOT EXISTS `food` ( 2 `id` int(11) NOT NULL AUTO_INCREMENT, 3 `title` varchar(100) NOT NULL, 4 `pic` varchar(255) NOT NULL, 5 PRIMARY KEY (`id`) 6 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=31 ;
我这边有一个demo,然后大家可以下载看看。多多指教。
http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903
相关文章推荐
- jquery ajax php mysql 无刷新分页 demo
- Jquery+php+mysql实现上拉加载更多,后端CI,超详细,有示例(其实就是ajax无刷新分页)
- PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
- php+ajax无刷新分页实例详解
- PHP MSSQL 分页实例(刷新)
- PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
- PHP分页详细讲解(有实例)
- PHP分页详细讲解(有实例)
- PHP jQuery Ajax 无刷新表单提交实例
- php memcached mysql开发详细实例
- php操作MSSQL 无限级分类+分页详细实例
- jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
- AJAX + PHP + MYSQL 实现无刷新分页
- php+ajax无刷新分页实例详解
- jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
- Jpaginate php mysql 分页应用实例
- PHP分页详细讲解(有实例)
- PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
- PHP ignore_user_abort函数详细介绍和使用实例
- PHP ignore_user_abort函数详细介绍和使用实例