我们常用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分页
原文地址：https://www.cnblogs.com/gwzzayy/p/9450934.html