需求:根据数据信息生成数据分页展示。
(注:商品的评论列表,分页使用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();
}
});
效果展示