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

更新时间：2022年06月17日 11:41:21 作者：暇光署墨

本文主要介绍了js如何使用Pagination+PageHelper实现分页，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、分页的原理：

1.1 分页的原理

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

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

1.2 真假分页

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

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

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

二、后端-PageHelper的使用：

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

<!--分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.10</version>
        </dependency>

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

<select id="QueryProductsById" resultMap="ProductsMap">
        SELECT
        <include refid="products_cloumn_list"/>
        FROM products WHERE id = #{Id}
    </select>

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

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

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

三、前端-Pagination的使用：

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

1、添加<template>标签的内容到需要分页的页面中

 <pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList" />

2、根据element集成中，在<script>中导入Pagination组件

import Pagination from '@/components/Pagination'

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

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
 
<script>
import { scrollTo } from '@/utils/scroll-to'
 
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>
 
<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

3、注册本地组件，并且因为在添加<template>标签的时候，绑定的有属性和方法，所以要对属性进行声明，以及方法的实现

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://localhost: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中进行设置

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"//背景色  true 为有背景色，false为无背景色
      :current-page.sync="currentPage"   //当前页
      :page-size.sync="pageSize" //页面的大小
      :layout="layout"   
      :page-sizes="pageSizes"
      :total="total" //总页数
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
 
<script>
import { scrollTo } from '@/utils/scroll-to'
 
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>
 
<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

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

到此这篇关于js如何使用Pagination+PageHelper实现分页的文章就介绍到这了,更多相关js Pagination PageHelper分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

el-form实现表单和图片手动上传和校验功能
在写项目时,难免遇到需要上传表单,图片等文件,且表单内容需进行验证及必填项提示,图片需要和信息一起传递且图片载入后需可预览,这篇文章给大家介绍el-form实现表单和图片手动上传和校验功能,感兴趣的朋友一起看看吧
2024-01-01
javascript中html字符串转化为jquery dom对象的方法
最近项目需求要开发百度地图相关的一个应用，需要从硬编码的html字符串中提取自己想要的元素以及属性信息，由于在js中或者jq中操作元素节点以及属性都是使用dom对象或者jq对象。下面介绍javascript中html字符串转化为jquery dom对象的方法，需要的朋友可以参考下
2015-08-08
JS中console对象内部提供调试方法示例详解
本文介绍了JavaScript中`console`对象提供的多种调试方法,包括`log`、`debug`、`dir`、`table`、`clear`、`group`、`groupEnd`、`time`和`timeEnd`,每种方法都有其特定的用途,感兴趣的朋友跟随小编一起看看吧
2025-02-02
js高精度计算decimal.js库用法demo
这篇文章主要给大家介绍了关于js高精度计算decimal.js库用法的相关资料,decimal.js是使用的二进制来计算的,所以能解决js的精度问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
Google Map Api和GOOGLE Search Api整合实现代码
将GOOGLE MAP API 和 GOOGLE Search API 进行整合，我用面向对象的方式写了一个类，通过传一个经纬度进去，自动通过GOOGLE LOCAL SEARCH获取附近的相关信息。比如餐厅、景点等，反过来标到地图上，并可在任意容器内显示。
2009-07-07
js实现网页同时进行多个倒计时功能
这篇文章主要为大家详细介绍了js实现网页同时进行多个倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
如何在TypeScript中处理日期字符串
这篇文章主要介绍了如何在TypeScript中处理日期字符串，主要通过输入日期字符串来改善开发者的体验并减少潜在的错误，下文实现操作的分享需要的小伙伴可以参考一下
2022-04-04
一个无限级XML绑定跨框架菜单（For IE）
一个无限级XML绑定跨框架菜单（For IE）...
2007-01-01
JS实现Date日期格式的本地化的方法小结
为了更好的更新多语言日期的显示,所以希望实现日期的本地化格式显示要求,常规的特殊字符型格式化无法满足显示要求,这里整理了几种我思考实现的本地化实现功能
2024-06-06
javascript实现数字时钟效果
这篇文章主要为大家详细介绍了javascript实现数字时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-02-02