基于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);