基於layerpage 前后端異步分頁

#下載jquery 和 layerpage
1.核心分頁方法

laypage({
  cont: 'page1', //容器。值支持id名、原生dom對象，jquery對象。
  pages: json.total, //通過后台拿到的總頁數
  skip: true, //是否開啟跳頁
  skin: '#6665fe',
  curr: curr || 1, //當前頁
  jump: function(obj, first){ //觸發分頁后的回調
    
      }
});

2.思路：通過ajax獲取分頁數據和總頁數。前端拿到總頁數然后分頁，點擊分頁鏈接時將當前頁數傳給ajax再次獲取分頁數據。

3.實例代碼

//整理數據
function  integratingData(data){
  var html = '';
  var imgUrl = "/strorage/menu/";
  for(var i=0;i<data.length;i++){
    html+='<li>'+
            '<a href="javascript:;">'+
              '<div class="leftImg">'+
                  '<img src="'+imgUrl+data[i].pic+'" alt="" width="100">'+
              '</div>'+
              '<div class="centerText">'+
                '<div class="leftText1">'+
                  '<div>發貨時間：'+data[i].submitdate+'</div>'+
                  '<div>菜品：'+data[i].menuname+'</div>'+
                  '<div>數量：'+data[i].num+'</div>'+
                  '<div>單號：'+data[i].voucherid+'</div>'+
                '</div>';
                //已驗收
                if(data[i].status == 1){
                    html +='<div class="leftText2">'+
                              '<div>實收：'+data[i].realnum+'</div>'+
                              '<div>報錯：'+data[i].description+'</div>'+
                            '</div>';
                }
                html+='</div>'+
                       '<div class="rightStatus">'+
                       '<div>狀態：'+
                       (data[i].status == 1 ? '<span >' : '<span style="color: #0099FF;">')+(data[i].status == 1 ? '已驗收': '未驗收')+'</span>'+
                            '</div>'+
                          '</div>'+
                        '</a>'+
                      '</li>';

  }

  $('#shipmentsLog ul').append(html);
}


//異步分頁
function menulists(url,curr){
    var page = curr || 1; //向服務端傳的參數
    $.api.getJSON(url, function(json){
        if(json.errcode == 0){
            var rows = json.data;
            $('#shipmentsLog ul li').remove();
            //拼接數據
            integratingData(rows);

        //顯示分頁
        laypage({
          cont: 'page1', //容器。值支持id名、原生dom對象，jquery對象。【如該容器為】：<div id="page1"></div>
          pages: json.total, //通過后台拿到的總頁數
          skip: true, //是否開啟跳頁
          skin: '#6665fe',
          curr: curr || 1, //當前頁
          jump: function(obj, first){ //觸發分頁后的回調
            if(!first){ //點擊跳頁觸發函數自身，並傳遞當前頁：obj.curr
                $('#shipmentsLog ul li').remove();
                menulists(url+'&page='+obj.curr,obj.curr);
                }
              }
            });
          }
      });
    };

//初始化 默認全部
menulists('/api/v1/voucher/lists?uid='+uid+'&status=-1&sid='+sid,1);