之前在练习layui的时候，遇到表格数据需要分页显示的，总是天真的以为要从数据库中取出全部数据，再在页面进行分页操作，其实应该将分页的代码操作在后台进行实现（其实之前都是在后台操作，只不过刚刚接触layui，天真以为它什么都帮我干了 哈哈）。
弄懂这件事之后，我在网上查了大量的文章，但多数都是以自己的业务需求出发的想法，多数照着弄都实现不了，很纠结，对于有代码洁癖的我来说，坚决认为layui还是能强大到不用额外的js和jquery代码，就能实现这个功能，而且不需要定义其他的除表格本身以外的其他div，就能将分页模块插进去（其实layui-table就自带了开启分页功能，真心想不懂还要另外的地方插入分页模块），那么我就将折磨了我一下午的layui-table自带的分页功能以我的视角，给大家展示一下我的代码，希望能对初学者的大家有那么一点点帮助：
页面的表格区域：
<table class="layui-hide" id="demo" lay-filter="test"></table>
layui的表格实例：（主要看limit和page这两个参数的写法）
//执行一个 table 实例
table.render({
elem: '#demo'//表格table的id属性
,height: 420
,url: '${pageContext.request.contextPath}/students/students' //请求数据接口
,limit:5//要传向后台的每页显示条数
//,page:true(自带的这个要注掉)
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
,limits:[5,10,15]
,first: false //不显示首页
,last: false //不显示尾页
}
,title: '用户表'
,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
,cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
,{field: 'name', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80,}
,{field: 'city', title: '城市', width:100}
,{field: 'email', title: '邮箱', width: 150}
,{field: 'major', title: '专业', width: 80}
,{field: 'score', title: '成绩', width: 80, sort: true}
,{field: 'sign', title: '备注', width: 200}
,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
});
后台:controller
@ResponseBody//可以把一个集合转为json返回给前端
@RequestMapping(value = "students")
//注意参数的名字要与前端对应（当然你自己制定名字也行，这里就默认用它的参数名字接手了）
public Map<String,Object> showStudents(int page, int limit) throws IOException{
//获取全部学生信息
List<Students> students = studentsService.getStudents();
//获取分页后的每页学生信息
List<Students> student = studentsService.getStudentsCount(page,limit);
Map<String,Object> tableData =new HashMap<String,Object>();
//这是layui要求返回的json数据格式
tableData.put("code", 0);
tableData.put("msg", "");
//将全部数据的条数作为count传给前台（一共多少条）
tableData.put("count", students.size());
//将分页后的数据返回（每页要显示的数据）
tableData.put("data", student);
//返回给前端
return tableData;
}
service层的方法为：
@Service
public class StudentsService {
@Autowired
StudentsDao studentsDao;
//获取所以学生数据
public List<Students> getStudents() {
return studentsDao.getStudents();
}
//获取分页条件的每页数据
public List<Students> getStudentsCount(int page, int pageSize) {
return studentsDao.getStudentsCount(page, pageSize);
}
}
dao层的方法为：
@Component
public interface StudentsDao {
//获取所以学生数据
public List<Students> getStudents();
//获取分页条件的每页数据
public List<Students> getStudentsCount(int page,int pageSize);
}
daoImp层的方法为：
@Repository
public class StudentDaoImpl implements StudentsDao {
@Autowired
JdbcTemplate jdbcTemplate;
@Override
public List<Students> getStudents() {
String sql = "select * from students";
RowMapper<Students> rowMapper=new BeanPropertyRowMapper<Students>(Students.class);
List<Students> students = jdbcTemplate.query(sql, rowMapper);
return students;
}
@Override
public List<Students> getStudentsCount(int page, int pageSize) {
int start = (page-1)*pageSize;
//mysql的分页条件
String sql = "select *from students limit "+start+" ,?";
RowMapper<Students> rowMapper=new BeanPropertyRowMapper<Students>(Students.class);
List<Students> students = jdbcTemplate.query(sql, rowMapper,pageSize);
return students;
}
}
实现效果：
image.png
这样一个利用layui-table自身的开启分页功能的代码示例就实现了。
