實現Ajax異步的layui分頁
阿新 • • 發佈:2018-08-09
fff com ref elements 無涯 @param 取數據 pub back
我們常用layui做前端的很多東西,比如分頁的實現,但是一般都是同步的,這次遇見一個新的需求,要求異步加載數據並且分頁也是異步的,解決思路是在先把異步加載數據方法分離用自定義函數出來,先調用自定的方法異步加載數據完成後再進行分頁,然後在分頁裏再次調用加載數據方法。。
頁面效果圖
頁面代碼
-
<div class="rctj-box ${(detailflg==‘detailflg‘)?‘‘:‘layui-hide‘} "> <div style="margin-top: 25px">人才推薦</div> <div class="rctj" style="margin-top: 10px;padding: 20px;background-color: #F2F2F2;" > <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr id="rckth"> <th style="text-align:center">姓名</th> <th style="text-align:center">學歷</th> <th style="text-align:center">技能</th> <th style="text-align:center">經驗</th> <th style="text-align:center">住址</th> <th style="text-align:center">聯系方式</th> </tr> </thead> <tbody id="rcktb"> <%-- <tr> <td> </td> <td>${res}</td> <td>${data}</td> <td>於千萬年之中</td> <td>時間的無涯的荒野裏…</td> <td>時間的無涯的荒野裏…</td> </tr> --%> </tbody> </table> </div> <div id="pagefenye" class="fenye" style="text-align:center;"></div> </div>
js代碼
-
//加載完成 $(function(){ var sherchkey=‘${positioninfo.name}‘; savePosition();//保存修改方法 getPeopleList(1,5,sherchkey);//獲取人才列表 // getPageList(); //分頁方法 }); //自己封裝獲取數據方法 function getPeopleList(crr,lmt,searchKey){ //獲取人才列表 $.ajax({ url:‘${ctx}/recruit/peoplelist‘, type:‘post‘, data:{ "curr":crr||1, "pageSize":lmt||5, "searchKey":searchKey }, dataType:‘json‘, success:function(res){ if(res.success=="success"){ console.log(res); count=res.data.totalElements;//總記錄 curr=res.data.number; //當前頁 limit=res.data.size; //每頁幾個 var rclist=res.data.content; var html=‘‘; var len=rclist.length; for (var i=0; i<len; i++){ var htmlbuf=‘<tr>‘+ ‘<td style="text-align:center">‘+rclist[i].name+‘</td>‘+ ‘<td style="text-align:center">‘+rclist[i].edu+‘</td>‘+ ‘<td style="text-align:center">‘+rclist[i].skill+‘</td>‘+ ‘<td style="text-align:center">‘+rclist[i].exp+‘</td>‘+ ‘<td style="text-align:center">‘+rclist[i].add+‘</td>‘+ ‘<td style="text-align:center">‘+rclist[i].tel+‘</td>‘+ ‘</tr>‘; html=html+htmlbuf; } $("#rcktb").html(html); //調用分頁方法 getPageList(count,curr,limit,searchKey); }else { layer.alert(res.message); } }, error:function(){ layer.msg("網絡故障"); } }) } //自己封裝分頁方法 function getPageList(count,curr,limit,searchKey){ //分頁方法 layui.use([‘laypage‘, ‘layer‘], function(){ var laypage = layui.laypage ,layer = layui.layer; //完整功能 laypage.render({ elem: ‘pagefenye‘, count: count||0, theme: ‘#009587‘, limit : limit||3, limits:[5, 10, 20, 30, 40], curr : curr||1, layout: [‘count‘, ‘prev‘, ‘page‘, ‘next‘, ‘refresh‘, ‘skip‘], jump: function(obj,first){ //debugger; if(!first){ //window.location.href = "?curr="+obj.curr+"&pageSize="+obj.limit+"&enterId="+‘${enterId}‘; getPeopleList (obj.curr,obj.limit,searchKey); } } }); }); }
後臺代碼
-
/** * 人才列表 * @param curr * @param pageSize * @param searchKey * @param enterId * @param model * @return */ @RequestMapping("/peoplelist") @ResponseBody public ResultEntity peopleList(@RequestParam(value = "curr", defaultValue = "1") int curr, @RequestParam(value = "pageSize", defaultValue = "5") int pageSize,String searchKey,Model model){ ResultEntity res = new ResultEntity(); try { PageUtils pageUtils = new PageUtils(curr, pageSize, "", ""); Page<List<Map<String, Object>>> list = recruitService.getPeopleList(searchKey, pageUtils); List<Map<String, Object>> dataList = (List<Map<String, Object>>) list.getData(); PageVo pageVo = new PageVo(list.getCurrentPageNo() - 1, dataList, pageSize, list.getTotalPageCount(), list.getTotalCount()); pageVo.setNumber(curr); res.setData(pageVo); //res.setData(curr); //res.setData(enterId); res.setSuccess("success"); res.setMessage("獲取成功"); } catch (Exception e) { e.printStackTrace(); res.setSuccess("false"); res.setMessage("獲取失敗"); } return res; }
實現Ajax異步的layui分頁