参考文档
http://www.layui.com/demo/laypage.html
http://www.layui.com/doc/modules/laypage.html

官方DEMO 对已知静态数据分页

<div id="demo20"></div> <!--分页数据的显示区域-->
<ul id="biuuu_city_list"></ul> <!--分页页码的显示区域-->
<script src="//res.layui.com/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>

layui.use(['laypage', 'layer'], function(){
 var laypage = layui.laypage   // 调用分页组建
 ,layer = layui.layer;  // 调用layer弹窗组建
 

 //测试数据
 var data = [
 '北京',
 '上海',
 '广州',
 '深圳',
 '杭州',
 '长沙',
 '合肥',
 '宁夏',
 '成都',
 '西安',
 '南昌',
 '上饶',
 '沈阳',
 '济南',
 '厦门',
 '福州',
 '九江',
 '宜春',
 '赣州',
 '宁波',
 '绍兴',
 '无锡',
 '苏州',
 '徐州',
 '东莞',
 '佛山',
 '中山',
 '成都',
 '武汉',
 '青岛',
 '天津',
 '重庆',
 '南京',
 '九江',
 '香港',
 '澳门',
 '台北'
 ];
 
 //调用分页
 laypage.render({
 elem: 'demo20' // 存放分页的容器，值可以是容器ID、DOM对象
 ,count: data.length  //数据总数。一般通过服务端得到
 ,limit: 10  // 每页显示的条数 默认值为10
 ,jump: function(obj){   // 回调函数 ,也可执行ajax读取服务端数据然后通过layui的模版引擎进行渲染操作
 //模拟渲染
     document.getElementById('biuuu_city_list').innerHTML = function(){
       var arr = []
       ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
       layui.each(thisData, function(index, item){
         arr.push('<li>'+ item +'</li>');
       });
       return arr.join('');
    }();
 }
 });
 
});
</script>

DEMO2 对分页读取服务端数据

<tbody id="listcontent">
<!--html输出内容容器-->
</tbody>

<div id="page" ><!--页码html输出容器--></div>

<script id="demo" type="text/html"> // 定义一个要循环输出的模版
 <tr data-id="{{d.id}}">
 <td align="center">
 <img src="/upload/{{d.image}}">
 </td>
 <td align="center">{{d.name}}</td>
 <td align="center">
 {{d.date_added}}
 </td>
 <td align="center">
 <input type="checkbox" name="product_id[]" value="{{d.product_id}}" title="选定">
 </td>
 </tr>
</script>



<script type="text/javascript">
 layui.use(['layer','laypage','laytpl','form','laydate'], function(){
 var $ = layui.jquery,
 form = layui.form,
 laypage = layui.laypage,
 laytpl = layui.laytpl;
 //分页
 var curr;
 laypage.render({
 elem: 'page' // 页码显示的容器
 ,limit:10
 ,count: '{$count}' //总页数
 ,groups: 5 //连续显示分页数
 ,jump: function(obj, first) { // 分页回调函数 数据渲染逻辑在此函数中执行
 layer.closeAll();
 curr = obj.curr;
 p = curr;
 document.getElementById('listcontent').innerHTML='';
 $.ajax({ // ajax从服务端获取数据
 type: "GET", 
 url: "", // 空为当前页 ajax请求的接口
 data: {p:curr},
 async: false,
 success: function(data){
 if(data)
 {
 layui.each(data,function(k,v){ // jquery循环遍历输出 服务端请求过来的数据
 var getTpl = document.getElementById('demo').innerHTML; // 获取模版引擎模版信息
 laytpl(getTpl).render(v, function(html){ // 通过layui模版引擎渲染数据
 document.getElementById('listcontent').innerHTML += html; // 把模版引擎渲染后的数据打印到 id为listcontent 的容器中
 });
 });
 }else{
 document.getElementById('content1').innerHTML="<div style='text-align:center'>还没有相关数据!</div>";
 }
 }
 });
 form.render(); //更新表单渲染
 }
 });
 
 });
</script>