layui实现小卡片数据分页

1.html加载界面

<script id="imgCardScript" type="text/html">
<!-- 面板使用的是栅格布局，我们用 layui-row 来定义行之后，只需使用layui-col-（标记+列数）就可以进行进行排序。 -->
<div style="padding: 20px; background-color: rgb(240, 235, 235);">
<div class="layui-row layui-col-space15">
{{#  layui.each(d, function(index, item){ }}
<div class="layui-col-md2">
<div class="layui-card" style="padding:0 0px;">
<div style="color: rgb(51, 51, 51);border-bottom: 1px solid rgb(246, 246, 246);border-radius: 2px 2px 0px 0px;height:155px;text-align:center">
<!-- <h3 style="font-weight: bold;text-align:center;">{{ item.buildingname }}{{ item.floornumber }}-{{ item.cellnumber }}</h3> -->
<img src="{{ item.img }}" style="width:150px;margin-top:8px;">
</div>
<hr>
<div style="line-height: 24px;text-align:center">
{{ item.name }}&nbsp;&nbsp;{{ item.sex }}&nbsp;&nbsp;{{ item.age }}
</br>
{{ item.exitDate }}
</div>
</div>
</div>
{{#  }); }}
</div>
</div>
</script>
<div class="wsp-table" id="imgCard" ></div>
<div id="laypage"></div>

2.渲染数据

// 把渲染完成的imgCardScript放入到imgCard里面
$.ajax({
type:"post",
url: this.api + "/WyExitInformation/imgPaging",//对应controller的URL
async:false,
data: JSON.stringify(params),
contentType: "application/json",
success:function(ret){
total=ret.count;  //设置总条数
console.log(ret);
data = ret.data;
var getTpl = **imgCardScript**.innerHTML
,view = document.getElementById('**imgCard**');
layui.use(['laytpl'], function(laytpl){
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
})
});
}
});
//分页
laypage.render({
elem: 'laypage', //注意，这里的 test1 是 ID，不用加 # 号
count: total, //数据总数，从服务端得到
limit:limit,   //每页条数设置
limits:[12, 18, 24, 30, 36, 42],
layout: [ 'prev','page', 'next', 'skip','count', 'limit'],
jump: function(obj, first){ //obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
page=obj.curr;  //改变当前页码
limit=obj.limit;//首次不执行
if(!first){
self.loadData(dd)  //加载数据
}
}
});