layui-table表格数据分页显示

     之前在练习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自身的开启分页功能的代码示例就实现了。