layui数据分页显示（前端+后台ssm）

一、前端和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>