js使用Pagination+PageHelper实现分页代码示例

本篇文章小编给大家分享一下js使用Pagination+PageHelper实现分页代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

一、分页的原理：

1.1 分页的原理

通过element-ui 的内置组件pagination实现分页，任何分页都有以下五个部分组成：

记录的总条数

每页显示的记录条数

总页数

当前是第几页

当前页的所有记录

1.2 真假分页

pagination实际上是一个组件，组件里设置了分页常用到的参数，让pagination组件得到分页常用的参数值，这就能够实现分页了。

真分页：当你目前在首页的时候，点击“第二页”或“下一页”的时候，会重新向后端发送请求，请求第二页的数据

假分页:一开始从后端发送请求获取所有的数据，前端通过在组件的方式对数据进行分页，再点击分页的按钮的时候，数据其实已经在浏览器缓存的缓存中了，不需要再请求后端接口

二、后端-PageHelper的使用：

1、首先要在pom.xml中添加pageHelper的依赖

        
            com.github.pagehelper
            pagehelper
            5.1.10
        

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

        SELECT
        
        FROM 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对接口进行测试，如果接口没有问题的话，就会在“实时响应”中获取到返回值信息。

三、前端-Pagination的使用：

（使用pagination之前，需要会element-UI有初步的了解），因为使用pagination就是一个从vue-element-admin上“搬运”代码的过程。具体可以在element集成上搜索“pagination”进行查看

1、添加

2、根据element集成中，在

import Pagination from '@/components/Pagination'

pagination组件中index.vue的内容如下:

3、注册本地组件，并且因为在添加

export default {
    components: { Pagination },
    data() {
      return {
        list: [{
            //查询出来的商品集合
        }],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
  methods: {
        getList() {
      // 获取数据
    }
  }
}

4、实现 getList() 方法，发送axios请求获取后端传递的数据，分别将返回的总条数和数据信息分贝赋给本地的total、list集合

  getList() {
        // 获取数据
        var vm = this;
        this.axios({
          method: 'get',
          url: 'http://**lo*calhost:8080/ssm-template/products/PageInfo?pageNum='+vm.listQuery.page+'&pageSize='+vm.listQuery.limit
        })
          .then(function (response) {
            vm.total = response.data.total;
            vm.list = response.data.list;
          })
      },

5、使用 created()方法，让页面加载时候调用 getList()方法，实现分页即可 ：

created() { this.getList() },

效果图如下：

四、分页中的细节：

分页中可以在进行更为详细的设置，比如背景色、当前页、总页数、去往第几页等等都可以在pagination的index.vue中进行设置

可以进行适当的修改，或者如果不想要某些功能，删除对应的部分即可~~~