标签：++ turn count() 联系 cep width rck evo info
我们常用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; }
标签：++ turn count() 联系 cep width rck evo info
原文地址：https://www.cnblogs.com/gwzzayy/p/9450934.html
