一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2022-06-17 15:02:06 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下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查询”语句;注意:语句结束不要用“;”

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、添加