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)  //加载数据                    
  }                
 }            
});