最近在接触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 ul15 {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>