实现Ajax异步的layui分页

2018-08-10 11:15:34来源：博客园阅读 ()

我们常用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;
        
        
    }