基于layerpage 前后端异步分页
基于layerpage 前后端异步分页
#下载jquery 和 layerpage
1.核心分页方法
|
1
2
3
4
5
6
7
8
9
10
|
laypage({ cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。 pages: json.total, //通过后台拿到的总页数 skip: true, //是否开启跳页 skin: '#6665fe', curr: curr || 1, //当前页 jump: function(obj, first){ //触发分页后的回调 }}); |
2.思路：通过ajax获取分页数据和总页数。前端拿到总页数然后分页，点击分页链接时将当前页数传给ajax再次获取分页数据。
3.实例代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
//整理数据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); |
