一、前端和js(需要引入layui.cc,layui.js和jquery.js)
<div class="z_table">
<table class="layui-hide" id="test"></table>
</div>
$(function() {
layui.use('table', function() {
var table = layui.table;
table.render({
elem: '#test',
height: 500,
url: 'http://localhost:8080/science-technology-server/getPavilionList' //数据接口
,
page: true //开启分页
,
loading: true,
text: {
none: '暂无相关数据'
} //默认:无数据。注:该属性为 layui 2.2.5 开始新增
,
cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,
cols: [
[{
field: 'pavilionId',
width: '9%',
title: 'ID',
sort: true
}, {
field: 'introduce',
width: '10%',
title: '上传者ID',
sort: true
},
{
field: 'opentime',
width: '9%',
title: 'ID',
sort: true
},{
field: 'price',
width: '9%',
title: 'ID',
sort: true
},
{
field: 'score',
width: '9%',
title: 'ID',
sort: true
}]
],
request: {
pageName: 'page',
limitName: 'size'
},
limit: 10,
limits: [10, 20,10,10]
});
});
})
二、后台
1、controller
@RequestMapping("getPavilionList")
public Object getPavilionList(@RequestParam(value = "page", defaultValue = "1") Integer page,@RequestParam(value = "size", defaultValue = "10") Integer size) {
List<Pavilion> pavilionList = pavilionService.getPavilionList(page, size);
if (pavilionList == null) {
return RecycleResult.build(500, "科技馆记录为空");
} else {
Integer count = pavilionService.countPavilion();// 总记录数
return new LayuiReplay<Pavilion>(0, "ok", count, pavilionList);
}
}
2、service
@Override
public List<Pavilion> getPavilionList(Integer page, Integer size) {
if(page == null || page <= 0){
page = 1;
}
if (size == null || size <= 0){
size = 10;
}
Integer start = (page - 1) * size;
return pavilionMapper.getPavilionList(start,size);
}
3、mapper.java
List<Pavilion> getPavilionList(@Param("start")Integer start, @Param("size") Integer size);
mapper.xml
<!-- 分页查询 -->
<select id="getPavilionList"
resultType="cn.science.ssm.po.Pavilion">
SELECT pavilion_id AS pavilionId, area_type AS areaType,introduce,
recommend_duration AS recommendDuration, address,opentime,
price,score,phone,tip,create_time AS createTime,update_time AS
updateTime
FROM pavilion
LIMIT #{start}, #{size}
</select>