利用ajax調用接口數據做分頁功能

1. 分頁方法，寫在公共js里面以供調用，代碼如下：

? ?因為采用了layui中的樣式，所以需要引入layui.css，可以去layui官網下載：http://www.layui.com

? ? 如果不想使用layui可以自己定義樣式，下面的代碼應該都看得懂吧。

//分頁 參數列表：當前頁數(從1開始)，總頁數，方法名，分頁容器的ID function pageGuide(pageIndex, sumPage, fname ,data_body ) {// 分頁的導航數量，只能為奇數var pageGuideCount = 5;// 顯示導航的中間部分var index = parseInt(pageGuideCount / 2);//開始索引var startIndex = 1;//結束索引var endIndex = pageGuideCount;if(sumPage <= pageGuideCount){startIndex = 1;endIndex = sumPage;}else{if(pageIndex > index){var a = sumPage - pageGuideCount;var b = pageIndex - index;startIndex = a >= b?(startIndex + b):startIndex + a;endIndex = a >= b?(pageGuideCount + b):pageGuideCount + a;}}var str = "";str += '<div class="layui-box layui-laypage layui-laypage-default" style="display:inline-block;">';// 上一頁if (pageIndex <= 1) {str += "<span class='layui-disabled'>上一頁</span>";} else {str += "<a href='javascript:;' class='layui-laypage-prev' οnclick='" + fname + "("+ (pageIndex - 1) + ")'>上一頁</a>";}//首頁str += "<a href='javascript:"+fname+"(1);' class='"+ (pageIndex<=1?"layui-disabled":"") +"' >首頁</a>";//前面省略顯示if(startIndex > 1){str += '<a href="javascript:;">···</a>';}//中間可點擊 分頁for ( var i = startIndex; i <= endIndex; i++) {if (i == pageIndex) {str += "<span class='layui-laypage-curr'><em class='layui-laypage-em' style='text-align:center;'>"+i+"</em></span>";} else {str += "<a href='javascript:"+fname+"("+ i + ");'>"+ i + "</a>";}}//后面省略顯示if(endIndex < sumPage){str += '<a href="javascript:;">···</a>';}//尾頁str += "<a href='javascript:" + fname + "("+ sumPage + ");' class='"+(pageIndex>=sumPage?"layui-disabled":"")+"'>尾頁</a>";// 下一頁if (pageIndex >= sumPage) {str += "<span class='layui-disabled'>下一頁</span>";} else {str += "<a href='javascript:"+fname+ "("+ (pageIndex + 1) + ");' class='layui-laypage-next'>下一頁</a>";}str += "</div>";$("#"+data_body+"").html(str); } 2. ?頁面調用接口，獲取數據，渲染分頁插件，示例代碼如下：

? ? ?

var pageSize = 5; //每頁記錄條數 showList(1);function showList(pageIndex){var roleName = $.trim($("[name=roleName]").val());var roleMark = $.trim($("[name=roleMark]").val());var status = $("[name=status]").val();var data = {roleName:roleName,roleMark:roleMark,status:status,sortName:"id",sortOrder:"desc",pageIndex:pageIndex,pageSize:pageSize};$.ajax({type: 'post',url: 'roleList',data: data,success: function(res){var html = '';if(res.error_code == 200){$.each(res.result,function(i,item){html += '<tr>'+'<td>'+'<input type="checkbox" lay-filter="itemChoose" name="role_check" lay-skin="primary">'+'</td>'+'<td>'+item.id+'</td>'+'<td>'+item.roleName+'</td>'+'<td>'+item.roleMark+'</td>'+'<td>'+item.status+'</td>'+'<td>'+'<a href="" class="layui-btn layui-btn-small">刪除</a>'+'<a href="" class="layui-btn layui-btn-small">編輯</a>'+'</td>'+'</tr>';});//分頁pageNum = Math.ceil(res.total/pageSize);pageGuide(pageIndex,pageNum,"showList","pageContent");}$(".role_list").html(html);form.render();}}); } 其中data是查詢條件，pageIndex是當前頁數，默認是第1頁，返回的結果是分頁后的結果，然后再渲染分頁插件，pageNum是總頁數，form.render()是layui的方法，如果沒有使用可以不加。

? ??

總結

以上是生活随笔為你收集整理的ajax结合接口 分页插件的全部內容，希望文章能夠幫你解決所遇到的問題。

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