Layui框架的分页（laypage）和模板引擎（laytpl）的使用

需求：根据数据信息生成数据分页展示。

（注：商品的评论列表，分页使用laypage，评论内容区块显示用laytpl）

思路：首先显示时，先请求数据，获取需要显示数据的总条数。在请求数据成功后，首先进行模板引擎的渲染，然后进行分页的渲染，更新当前页和显示条数。
跳页显示时，在分页插件的跳页回调方法中再次调用请求数据方法，更新总条数，重新进行数据渲染。

laytpl的模板定义

<script id="commentDemo" type="text/html"> <!--定义模板 -->
{{#  layui.each(d, function(index, item){ }}
<div class="comment_block">
    <div class="member_block">
        <div class="member_head">
            <img class="member_head_img" src="{{item.avatarUrl}}">
        </div>
        <div class="member_name">{{item.nickname}}</div>
    </div>
    <div class="content_block">
        <div class="content_star star{{item.star}}"></div>
        <div class="content_text">{{item.content}}</div>
        <div class="content_img">
            {{#  layui.each(item.imgList, function(indexImg, itemImg){ }}
            <span class="img_list">
                <img class="img_deatils" src="{{itemImg.picUrl}}">
            </span>
            {{#  }); }}
        </div>
        <div class="content_img_big">
            <img class="img_big_deatils" src="">
        </div>
        <div class="content_tips">
            <div
            <script id="commentDemo" type="text/html"> <!--定义模板 -->
            {{#  layui.each(d, function(index, item){ }}
            <div class="comment_block">
                <div class="member_block">
                    <div class="member_head">
                        <img class="member_head_img" src="{{item.avatarUrl}}">
                    </div>
                    <div class="member_name">{{item.nickname}}</div>
                </div>
                <div class="content_block">
                    <div class="content_star star{{item.star}}"></div>
                    <div class="content_text">{{item.content}}</div>
                    <div class="content_img">
                        {{#  layui.each(item.imgList, function(indexImg, itemImg){ }}
                        <span class="img_list">
                            <img class="img_deatils" src="{{itemImg.picUrl}}">
                        </span>
                        {{#  }); }}
                    </div>
                    <div class="content_img_big">
                        <img class="img_big_deatils" src="">
                    </div>
                    <div class="content_tips">
                        <div class="content_spec">{{item.specification}}</div>
                        <div class="content_time">{{item.createTime}}</div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            {{#  }); }}
            {{#  if(d.length === 0){ }}
                暂无无数据
            {{#  } }}
            </script>
            <div id="commentView"></div><!--显示视图 -->
            <div  id="comment_block_page"></div> <!--使用插件 --> class="content_spec">{{item.specification}}</div>
            <div class="content_time">{{item.createTime}}</div>
        </div>
    </div>
    <div class="clear"></div>
</div>
{{#  }); }}
{{#  if(d.length === 0){ }}
    暂无无数据
{{#  } }}
</script>
<div id="commentView"></div>  <!--显示视图 -->
<div  id="comment_block_page"></div> <!--使用插件 -->

模板引擎渲染代码

//模板引擎渲染
var renderComment = function(arrayData){
    var commentDemo = $('#commentDemo').html()
        ,commentView = document.getElementById('commentView');
    laytpl(commentDemo).render(arrayData.records, function(html){
        commentView.innerHTML = html;
    });
};

请求数据代码

//请求数据
var getGoodInfoDeatil = function(){
    $.ajax({
        url: 'searchCommentInfoById',
        method : 'post',
        dataType: 'json',
        async: false,
        data:{
            id : goodId,
            page : page,
            limit : limit
        },
        success: function (response) {
            if(response.success) {
                var arrayData = response.data;
                //确定总数
                total = arrayData.total;
                if(total == 0){
                    $('#comment_block_page').css({'display':'none'});
                }
                //进行渲染
                renderComment(arrayData);
            }else {
                layer.msg(response.msg,{icon:5,time:1000});
            }
        },
        error: function () {
            layer.msg('系统错误！', {
                icon: 5
            });
        }
    });
};

使用分页代码

//评论分页
var pageComment = function(){
    laypage.render({
        elem: 'comment_block_page' //注意，这里的 test1 是 ID，不用加 # 号
        ,count: total //数据总数，从服务端得到
        ,limits: [10, 25, 50, 100]
        ,first: '首页'
        ,last: '尾页'
        ,prev: '<em><<</em>'
        ,next: '<em>>></em>'
        // 自定义主题
        ,theme: "#FF5722"
        ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
        ,jump: function(obj, first){
            //获取当前分页
            page = obj.curr;
            limit = obj.limit;

            //首次不运行
            if(!first){
                getGoodInfoDeatil();
            }
        }
    });
};

调用顺序（使用的是tab面板，所以在面板切换时，调用方法，加载数据）

//切换至评论页面
element.on('tab(goodInfoDetail)', function(data){
    if(data.index == 3){
        //首次请求数据和分页
        getGoodInfoDeatil(); 
        pageComment();
    }
});

效果展示