js如何使用Pagination+PageHelper实现分页 js如何使用Pagination+PageHelper实现

一、分页的原理：

1.1 分页的原理
1.2 真假分页

二、后端-PageHelper的使用：

三、前端-Pagination的使用：

四、分页中的细节：

一、分页的原理： 【js如何使用Pagination+PageHelper实现分页】
1.1 分页的原理
通过element-ui 的内置组件pagination实现分页，任何分页都有以下五个部分组成：

记录的总条数
每页显示的记录条数
总页数
当前是第几页
当前页的所有记录

1.2 真假分页
pagination实际上是一个组件，组件里设置了分页常用到的参数，让pagination组件得到分页常用的参数值，这就能够实现分页了。
真分页：当你目前在首页的时候，点击“第二页”或“下一页”的时候，会重新向后端发送请求，请求第二页的数据
假分页:一开始从后端发送请求获取所有的数据，前端通过在组件的方式对数据进行分页，再点击分页的按钮的时候，数据其实已经在浏览器缓存的缓存中了，不需要再请求后端接口

二、后端-PageHelper的使用： 1、首先要在pom.xml中添加pageHelper的依赖

com.github.pagehelperpagehelper5.1.10

2、在映射文件中书写“SQL查询”语句；注意：语句结束不要用“；”

SELECTFROM products WHERE id = #{Id}

3、书写Controller类，注意：调用PageHelper的startPage方法一定要在调用接口中方法前。

@RequestMapping("/PageInfo")public PageInfo pageInfo(int pageNum, int pageSize) {PageHelper.startPage(pageNum, pageSize); List list = productsDaoService.QueryProducts(); PageInfo pageInfo = new PageInfo(list); return pageInfo; }

4、启动tomcat服务器，使用Apipost对接口进行测试，如果接口没有问题的话，就会在“实时响应”中获取到返回值信息。