我們常用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分頁