#下载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);