jquery ajax php+mysql 无刷新分页 详细实例
最近在接触jquery和ajax，当前项目也会用到分页，为了用户体验更好一些，就准备用无刷新分页，这个demo很适合新手学习查看，写的比较清晰，话不多说，直接上代码吧。
首先是html页面，index.html，代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>php+mysql+ajax+jquery分页</title> 6 7 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 8 <script type="text/javascript" src="ajaxPager.js"></script> 9 <style> 10 #main{ 11 width:980px; 12 margin:0px auto; 13 } 14 ul 15 { 16 list-style:none; 17 margin:0px; 18 } 19 #list li{ 20 width:220px; 21 height:280px; 22 float:left; 23 margin-left:10px; 24 } 25 .pager .cur { 26 border-top-color: rgb(255, 255, 255); 27 border: 1px solid #fff; 28 background: 0; 29 font-weight: bold; 30 color: #000; 31 } 32 .pager a, .pager span { 33 margin-top: 5px; 34 } 35 .pager a, .pager span { 36 background: none repeat scroll 0 0 #fff; 37 border: 1px solid #e7ecf0; 38 color: #0000cd; 39 float: left; 40 height: 22px; 41 line-height: 22px; 42 margin-right: 5px; 43 overflow: hidden; 44 text-align: center; 45 text-decoration: none; 46 width: auto; 47 padding: 0 8px; 48 } 49 .pager span { 50 background: none repeat scroll 0 0 #fff; 51 border: 1px solid #e7ecf0; 52 color: #0000cd; 53 float: left; 54 height: 22px; 55 line-height: 22px; 56 margin-right: 5px; 57 overflow: hidden; 58 text-align: center; 59 text-decoration: none; 60 width: auto; 61 padding: 0 8px; 62 } 63 .pager { 64 border-top: 0; 65 padding: 12px 0 30px 15px; 66 float: left; 67 } 68 .clearfix { 69 display: block; 70 } 71 .pager { 72 float: left; 73 font-family: Arial; 74 font-size: 13px; 75 } 76 .clearfix { 77 zoom: 1; 78 } 79 </style> 80 81 82 </head> 83 84 <body> 85 86 87 <div id="main"> 88 <div id="pagecount" class="pager clearfix"></div><div id="loading"></div> 89 <br /> 90 <br /> 91 <br /> 92 <br /> 93 <div id="list"> 94 <ul></ul> 95 </div> 96 </div> 97 </body> 98 </html>
样式我随便写的，毕竟我样式写的很差，大家可以自己换样式的。
然后就是js代码了，ajaxPager.js，代码如下：
1 var curPage = 1; //当前页码 2 var total,pageSize,totalPage; 3 //获取数据 4 function getData(page){ 5 $.ajax({ 6 type: 'POST', 7 url: 'pages.php', 8 data: {'pageNum':page-1}, 9 dataType:'json', 10 beforeSend:function(){ 11 $("#loading").html("<img id='loadin'g src='loading.gif'>"); 12 }, 13 success:function(json){ 14 $("#loading").html(""); 15 $("#list ul").empty(); 16 total = json.total; //总记录数 17 pageSize = json.pageSize; //每页显示条数 18 curPage = page; //当前页 19 totalPage = json.totalPage; //总页数 20 var li = ""; 21 var list = json.list; 22 $.each(list,function(index,array){ //遍历json数据列 23 li += "<li><a href='#'><img src='"+array['pic']+"'></a><p>"+array['title'].substring(0,10)+"</p></li>"; 24 }); 25 $("#list ul").append(li); 26 }, 27 complete:function(){ //生成分页条 28 getPageBar(); 29 }, 30 error:function(){ 31 alert("数据加载失败"); 32 } 33 }); 34 } 35 36 //获取分页条 37 function getPageBar(){ 38 //页码大于最大页数 39 if(curPage>totalPage) curPage=totalPage; 40 //页码小于1 41 if(curPage<1) curPage=1; 42 pageStr = "<span class=''>共"+total+"条"+curPage+"/"+totalPage+"</span>"; 43 44 //如果是第一页 45 if(totalPage<=4) 46 { 47 if(curPage==1){ 48 pageStr += "<span class='cur'>1</span>"; 49 for(var i=2;i<=totalPage;i++) 50 { 51 pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"; 52 } 53 }else{ 54 pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"; 55 for(var i=1;i<=totalPage;i++) 56 { 57 if(i==curPage) 58 { 59 pageStr += "<span class='cur'>"+i+"</span>" 60 } 61 else 62 { 63 pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"; 64 } 65 } 66 67 } 68 } 69 else//当页数大于5的时候就要这样显示1 2 3 4 ... 70 { 71 if(curPage<=3){ 72 if(curPage==1) 73 { 74 pageStr += "<span class='cur'>1</span>"; 75 } 76 else 77 { 78 pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"; 79 pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>"; 80 } 81 for(var i=2;i<=4;i++) 82 { 83 if(i==curPage) 84 { 85 pageStr += "<span class='cur'>"+i+"</span>" 86 } 87 else 88 { 89 pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"; 90 } 91 } 92 pageStr += "<span class='cur'>...</span>"; 93 }else{ 94 pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"; 95 pageStr += "<span class='cur'>...</span>"; 96 if(curPage>totalPage-2) 97 { 98 for(var i=totalPage-2;i<=totalPage;i++) 99 { 100 if(i==curPage) 101 { 102 pageStr += "<span class='cur'>"+i+"</span>" 103 } 104 else 105 { 106 pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"; 107 } 108 } 109 } 110 else 111 { 112 pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>"; 113 pageStr += "<span class='cur'>"+curPage+"</span>"; 114 pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>"; 115 pageStr += "<span class='cur'>...</span>"; 116 } 117 } 118 } 119 //如果是最后页 120 if(curPage>=totalPage){ 121 //pageStr += "<span>></span> <span>>></span>"; 122 }else{ 123 pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>"; 124 } 125 126 $("#pagecount").html(pageStr); 127 } 128 129 $(function(){ 130 getData(1); 131 $("#pagecount a").live('click',function(){ 132 var rel = $(this).attr("rel"); 133 if(rel){ 134 getData(rel); 135 } 136 }); 137 });
因为项目的需要，我这个页面页数显示只能显示几页，比如就这样 << < ... 5 6 7 ... > >>，要改显示的，就在ajaxPager.js里面改。
$.ajax({ 中url: 'pages.php'，处理就在pages.php中处理。那么就来看看pages.php中的代码：
1 <?php 2 include_once('connect.php'); 3 4 $page = intval($_POST['pageNum']); 5 6 $result = mysql_query("select id from food"); 7 $total = mysql_num_rows($result);//总记录数 8 9 $pageSize = 8; //每页显示数 10 $totalPage = ceil($total/$pageSize); //总页数 11 12 $startPage = $page*$pageSize; 13 $arr['total'] = $total; 14 $arr['pageSize'] = $pageSize; 15 $arr['totalPage'] = $totalPage; 16 $query = mysql_query("select id,title,pic from food order by id asc limit $startPage,$pageSize"); 17 while($row=mysql_fetch_array($query)){ 18 $arr['list'][] = array( 19 'id' => $row['id'], 20 'title' => $row['title'], 21 'pic' => $row['pic'], 22 ); 23 } 24 //print_r($arr); 25 echo json_encode($arr); 26 ?>
上面当然还有数据库连接了啦，这个应该很简单吧，还是贴出来connect.php：
1 <?php 2 include_once('connect.php'); 3 4 $page = intval($_POST['pageNum']); 5 6 $result = mysql_query("select id from food"); 7 $total = mysql_num_rows($result);//总记录数 8 9 $pageSize = 8; //每页显示数 10 $totalPage = ceil($total/$pageSize); //总页数 11 12 $startPage = $page*$pageSize; 13 $arr['total'] = $total; 14 $arr['pageSize'] = $pageSize; 15 $arr['totalPage'] = $totalPage; 16 $query = mysql_query("select id,title,pic from food order by id asc limit $startPage,$pageSize"); 17 while($row=mysql_fetch_array($query)){ 18 $arr['list'][] = array( 19 'id' => $row['id'], 20 'title' => $row['title'], 21 'pic' => $row['pic'], 22 ); 23 } 24 //print_r($arr); 25 echo json_encode($arr); 26 ?>
然后就完成了，具体思路很清晰，点击页数的时候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
