我们常用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;
}
原文地址：https://www.cnblogs.com/gwzzayy/p/9450934.html
时间： 2024-10-26 09:46:00