ajax分页实现（php）
使用jquery.pagination.js插件
引入js文件、css文件
<link rel="stylesheet" href="/css/pagination.css"/> <link rel="stylesheet" href="/css/project-search.css"/>
jq文件必须在pagination前加载，否则会出错
<script type="text/javascript" src="/lib/jquery.min.js"></script> <script type="text/javascript" src="/lib/jquery.pagination.js"></script>
前台添加分页div
<div id="Pagination"></div>
js代码：（由于在框架中使用所以其他参数就不去了……）
1 <script type="text/javascript"> 2 $(function(){ 3 //每页条数 4 var pageSize = 15; 5 6 var currentPageNum = 0; 7 8 var url_1 = '/search/projectcount'; 9 var url_2 = '/search/projectlist'; 10 var type = 'get'; 11 12 var totalCount = 0; 13 var totalPage = 0; 14 15 var initQueryString_1 = 16 { 17 name: '', 18 industryCode: '', 19 typeCode: '', 20 wasBindUniTechnology: '-9', 21 investStageCode: '', 22 provinceCode: '' 23 } 24 25 var initQueryString_2 = 26 { 27 name: '', 28 industryCode: '', 29 typeCode: '', 30 wasBindUniTechnology: '-9', 31 investStageCode: '', 32 provinceCode: '', 33 pageIndex: '0', 34 pageSize: pageSize 35 } 36 37 //获取总页数，产生分页 38 $.ajax({ 39 url:url_1, 40 type:type, 41 data:initQueryString_1, 42 success : function(msg){ 43 totalCount = msg; 44 45 totalPage = Math.ceil((msg!='0'?msg:1)/pageSize); 46 $("#Pagination").pagination(totalPage, { 47 callback: pageSearch 48 }); 49 $('.project-search-pages .allPage').html(totalPage); 50 51 //如果数据总条数小于pageSize，则不显示分页 52 if (totalCount < pageSize){ 53 $('.project-search-pages').addClass('hidden'); 54 } 55 if (totalCount > pageSize){ 56 $('.project-search-pages').removeClass('hidden'); 57 } 58 } 59 }) 60 61 62 63 64 //获取数据，第一页，不超过pageSize条 65 $.ajax({ 66 url:url_2, 67 type:type, 68 data:initQueryString_2, 69 beforeSend :function(){ 70 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="30px;height:30px"></div>'); 71 }, 72 success : function(msg){ 73 $(".project-search-list").html(msg); 74 } 75 }) 76 77 78 79 //给搜索按钮添加点击事件 80 $('#searchBtn').click(function() { 81 btnSearch(); 82 }); 83 84 //给所有筛选项添加点击事件 85 $('.map-item-box li a').click(function(){ 86 classifySearch(); 87 }); 88 89 //给跳转到指定页添加事件 90 $('.my-page-btn').click(function(){ 91 var goPage = $('.page-go input').val() - 1; 92 var allPage = $(".allPage").text(); 93 94 if(goPage > -1 && goPage < allPage){ 95 //产生分页 96 $("#Pagination").pagination(allPage,{ 97 callback: pageSearch, 98 current_page: goPage 99 }); 100 //更新数据 101 $(".project-search-list").html(goToPage(goPage)); 102 } else { 103 //清空用户跳转页数 104 $(".page-go input").val(""); 105 return false; 106 } 107 //清空用户跳转页数 108 $(".page-go input").val(""); 109 110 }); 111 112 113 function btnSearch() { 114 115 $('.map-item-box li a').removeClass('selected'); 116 $('.map-item-box li.map-item-all-btn a').addClass('selected'); 117 118 var paras = 119 { 120 name:$('#name').val(), 121 industryCode:'', 122 typeCode:'', 123 wasBindUniTechnology:'', 124 investStageCode:'', 125 provinceCode:'' 126 }; 127 128 $.ajax({ 129 url: '/search/projectcount', 130 type: 'get', 131 data: paras, 132 success: function(msg) { 133 totalCount = msg; 134 totalPage = Math.ceil((msg!='0'?msg:1)/pageSize); 135 $("#Pagination").pagination(totalPage, { 136 callback: pageSearch 137 }); 138 $('.project-search-pages .allPage').html(totalPage); 139 140 //如果数据总条数小于pageSize，则不显示分页 141 if (totalCount < pageSize){ 142 $('.project-search-pages').addClass('hidden'); 143 } 144 if (totalCount > pageSize){ 145 $('.project-search-pages').removeClass('hidden'); 146 } 147 } 148 }) 149 150 paras.pageIndex = 0; 151 paras.pageSize = pageSize; 152 153 $.ajax({ 154 url:'/search/projectlist', 155 type:'get', 156 data:paras, 157 beforeSend :function(){ 158 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="30px;height:30px"></div>'); 159 }, 160 success : function(msg){ 161 $(".project-search-list").html(msg); 162 } 163 }) 164 165 } 166 167 function classifySearch() { 168 $('#name').val(''); 169 170 var paras = 171 { 172 name:'', 173 industryCode:$("#industryCode .selected").attr('data-code'), 174 typeCode:$("#typeCode .selected").attr('data-code'), 175 wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'), 176 investStageCode:$("#investStageCode .selected").attr('data-code'), 177 provinceCode:$("#provinceCode .selected").attr('data-code'), 178 }; 179 180 $.ajax({ 181 url: '/search/projectcount', 182 type: 'get', 183 data: paras, 184 success: function(msg) { 185 totalCount = msg; 186 totalPage = Math.ceil((msg!='0'?msg:1)/pageSize); 187 $("#Pagination").pagination(totalPage, { 188 callback: pageSearch 189 }); 190 $('.project-search-pages .allPage').html(totalPage); 191 192 //如果数据总条数小于pageSize，则不显示分页 193 if (totalCount < pageSize){ 194 $('.project-search-pages').addClass('hidden'); 195 } 196 if (totalCount > pageSize){ 197 $('.project-search-pages').removeClass('hidden'); 198 } 199 } 200 }) 201 202 paras.pageIndex = 0; 203 paras.pageSize = pageSize; 204 205 $.ajax({ 206 url:'/search/projectlist', 207 type:'get', 208 data:paras, 209 beforeSend :function(){ 210 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="30px;height:30px"></div>'); 211 }, 212 success : function(msg){ 213 $(".project-search-list").html(msg); 214 } 215 }) 216 217 } 218 219 function pageSearch(page_index, jq) { 220 var paras = null; 221 var search_word = $('#name').val(); 222 223 if (search_word == '') 224 paras = 225 { 226 name:'', 227 industryCode:$("#industryCode .selected").attr('data-code'), 228 typeCode:$("#typeCode .selected").attr('data-code'), 229 wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'), 230 investStageCode:$("#investStageCode .selected").attr('data-code'), 231 provinceCode:$("#provinceCode .selected").attr('data-code') 232 }; 233 234 if (search_word != '') 235 paras = 236 { 237 name:$('#name').val(), 238 industryCode:'', 239 typeCode:'', 240 wasBindUniTechnology:'', 241 investStageCode:'', 242 provinceCode:'' 243 }; 244 245 paras.pageIndex = page_index; 246 paras.pageSize = pageSize; 247 248 //alert(paras.pageIndex) 249 250 $.ajax({ 251 url:'/search/projectlist', 252 type:'get', 253 data:paras, 254 beforeSend :function(){ 255 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="30px;height:30px"></div>'); 256 }, 257 success : function(msg){ 258 $(".project-search-list").html(msg); 259 } 260 }) 261 262 } 263 264 function goToPage(page_index) { 265 var paras = null; 266 var search_word = $('#name').val(); 267 268 if (search_word == '') 269 paras = 270 { 271 name:'', 272 industryCode:$("#industryCode .selected").attr('data-code'), 273 typeCode:$("#typeCode .selected").attr('data-code'), 274 wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'), 275 investStageCode:$("#investStageCode .selected").attr('data-code'), 276 provinceCode:$("#provinceCode .selected").attr('data-code') 277 }; 278 279 if (search_word != '') 280 paras = 281 { 282 name:$('#name').val(), 283 industryCode:'', 284 typeCode:'', 285 wasBindUniTechnology:'', 286 investStageCode:'', 287 provinceCode:'' 288 }; 289 290 paras.pageIndex = page_index; 291 paras.pageSize = pageSize; 292 293 $.ajax({ 294 url:'/search/projectlist', 295 type:'get', 296 data:paras, 297 beforeSend :function(){ 298 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="30px;height:30px"></div>'); 299 }, 300 success : function(msg){ 301 $(".project-search-list").html(msg); 302 document.body.scrollTop=0; 303 } 304 }) 305 306 } 307 308 }) 309 310 </script>
后台php 实现，主要是提供数据由前台传递的pageindex ,pagesize 来查询数据并返回
1 //搜索页 2 $con = trim($_GET['title']); 3 $pageIndex = isset($_GET['pageIndex']) ? $_GET['pageIndex']:''; 4 $pageSize = isset($_GET['pageSize']) ? $_GET['pageSize']:''; 5 $pageIndex = $pageIndex*$pageSize;//偏移量 6 $map['isshow'] = 2; 7 $ip = get_client_ip(); 11 $map['title'] = array('like', "%$con%"); 12 // 多表联查 13 $proinfo = M("project")->alias('p') 14 ->join("user as u on p.uid = u.id ",'left') 15 ->join("project_type as t on p.type = t.id ",'left') 16 ->where($map) 17 ->field("p.id,p.siteid,title") 18 ->order('addtime desc') 19 ->limit($pageIndex,$pageSize) 20 ->select(); 22 40 if(empty($proinfo)){ 41 $error = '暂时没有相关信息！'; 42 $this->ajaxReturn(array('status'=>0,'msg'=>$error)); 43 }else{ 47 $this->ajaxReturn(array('status'=>1,'dataList'=>$proinfo)); 48 }
实现起来不是很复杂，理一下思路就好了。
参考网址：http://cy.ncss.org.cn/search/projects 这个网站也是通过ajax请求数据分页的。