以前layui分页使用Jquery拼接元素进行渲染，感觉比较麻烦而且不够优雅，后来使用了其他分页方式一直没有时间更新，现在记录下用layui的模板引擎laytpl对分页数据进行渲染。

一：引入layUI的相关资源

1
2
3
<link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css">
<script src="${ctxPath}/vendor/layui-v2.4.5/layui/layui.js"></script>
<script src="${ctxPath}/vendor/jquery.min.js"></script>//引入jquery包

二：html页面代码

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
<div class="layui-main g-main">
   <div class="layui-row">
       <div class="layui-col-xs12">
           <table class="layui-table">
               <thead>
                   <tr>
                       <th>积分类型</th>
                       <th>积分原因</th>
                       <th>积分值</th>
                       <th>创建时间</th>
                   </tr>
               </thead >
               
               <tbody id="tableList">
				//使用模板引擎渲染数据
               </tbody>
               
           </table>
           
           //分页渲染
           <div id="page" style="text-align: center;"></div>
           
       </div>
   </div>
</div>

三：模板js

1
2
3
4
5
6
7
8
9
10
<script id="tpl" type="text/html">
  {{#  layui.each(d, function(index, item){ }}
	  <tr>
	      <td>{{item.type}}</td>
	      <td>{{item.reason}}</td>
	      <td>{{item.sum}}</td>
	      <td>{{item.time}}</td>
     </tr>
  {{#  }); }}
</script>

四：分页加载渲染

为了便于大家查看，就不按方法拆分为几个代码片段分别展示了，注意看代码注释说明。

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script>
	layui.use(['laytpl','laypage','jquery','form'],function(){
	    let laypage = layui.laypage,$ = layui.$, laytpl = layui.laytpl;
	    
		//模板引擎--自定义工具类
	    let _tplUtil = {
	    
	      //请求数据
	      request : function(param){
	        $.ajax({
	          type   		: param.method || 'get',
	          url    		: param.url    || '',
	          dataType 	: param.type || 'json',
	          data 		: param.data || '',
	          async 	: param.async || true,
	          success 	: function(res){
	            typeof param.success === 'function' && param.success(res);
	          },
	          error     : function(err){
	            typeof param.error === 'function' && param.error(err.statusText);
	          }
	        });
	      },
	      //渲染数据到模板，返回html
	      renderHtml : function(htmlTemplate, data){
	        let template = laytpl(htmlTemplate),
	                result = template.render(data);
	        return result;
	      },
	      //**导入并渲染模板数据**
	      loadTplData : function(tplId,elementId,url,params) {
	        // 模版引擎导入
	        let html = $('#'+tplId).html();
	        let element = $('#'+elementId);
	        _tplUtil.request({
	          type: 'get',
	          url: url,
	          dataType: 'json',
	          data: params,
	          async: false,
	          success : function(res){
	            element.innerHTML = _tplUtil.renderHtml(html,res)
	          },
	          error: function(res){
	            console.log(res);
	          }
	        })
	      }
	    }
	
		
		//请求参数的封装
	    function showData(pageNo,pageSize) {
	      let params = {
	        pageNo: pageNo,
	        pageSize: pageSize
	        //...如果还需要进行条件查询，可在此传入查询参数，进行参数封装
	      }
		  //调用模板引擎加载并渲染数据
	      _tplUtil.loadTplData('tpl','tableList','/recard/findData',params);
	    }
		
		//分页渲染
	    $.get('/recard/getTotal', function (total) {
	      laypage.render({
	        elem: $("#page") //分页元素
	        , count: total //数据总数，从服务端得到
	        , limit: 10                      //默认每页显示条数
	        , limits: [10, 20, 30]           //可选择的每页显示条数
	        , curr: 1                        //起始页
	        , groups: 5                      //连续页码个数
	        , prev: '上一页'                 //上一页文本
	        , netx: '下一页'                 //下一页文本
	        , first: 1                      //首页文本
	        , last: 100                     //尾页文本
	        , layout: ['prev', 'page', 'next', 'limit', 'refresh', 'count', 'skip']
	        //跳转页码时调用
	        , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
	          pageNo = obj.curr;
	          pageSize = obj.limit;
	
	          //调用函数封装参数，加载数据
	          showData(obj.curr, obj.limit);
	        }
	      })
	    }, 'json');
	
	  });
  </script>

以上代码不局限于table表格分页，如果只是table表格分页查询，推荐使用layui自带分页功能，可以参考下面的博客。

表格分页推荐：使用layui的table组件自带分页功能（异步，含条件查询）点这里