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="width: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="width: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="width: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="width: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="width: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請求數據分頁的。

轉載于:https://www.cnblogs.com/lovebing/p/6823703.html

總結

以上是生活随笔為你收集整理的ajax分页实现（php）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。