基于PageHelper和ElementUI的分页完整案例

开发中经常需要做表格的分页功能，涉及前后端，下面是总结的表格分页前后端完整案例。

1.技术选型

前端：Vue + ElementUI框架

后端：Springboot + PageHelper框架

数据库： Mysql

2.数据准备

2.1 创建Person表

DROP TABLE IF EXISTS `person`;
CREATE TABLE `person`  (
  `id` bigint(20) NOT NULL,
  `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `age` int(11) NULL DEFAULT NULL,
  `email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) 

2.2 导入数据

INSERT INTO `person` VALUES (1, '张三01', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (2, '张三02', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (3, '张三03', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (4, '张三04', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (5, '张三05', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (6, '张三06', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (7, '张三07', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (8, '张三08', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (9, '张三09', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (10, '张三10', '123', 18, '752398154@qq.com');
INSERT INTO `person` VALUES (11, '张三11', '123', 18, '752398154@qq.com');

3.前端代码

前提Vue项目需要引入ElementUI框架，分页使用ElementUI

<template>
    <div>
        <div>
            <el-table :data="persons" style="width: 100%">
                <el-table-column prop="id" label="id" width="180">
                </el-table-column>
                <el-table-column prop="username" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="password" label="密码" width="180">
                </el-table-column>
                <el-table-column prop="age" label="年龄">
                </el-table-column>
                <el-table-column prop="email" label="邮箱">
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-wrapper">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                layout="total, sizes, prev, pager, next, jumper" :page-sizes="[5,10,20]" :current-page="pageNum" :total="total"
                :page-size="pageSize">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            persons: [],
            pageNum: 1, //当前页
            pageSize: 5,//每一页多少条肌理
            total:0 //总页数
        }
    },
    methods: {
        //传入pageNum和pageSize ,查询符合要求的数据
        getAllPerson() {
            this.$http.get("/person/list?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then((result) => {
                this.persons = result.data.list;
                this.pageNum = result.data.pageNum;
                this.pageSize = result.data.pageSize;
                this.total = result.data.total;
            })
        },
      
        //当改变每页显示的条数时触发,例如从每页显示十条变为每页显示20条
        handleCurrentChange(val){
            console.log(`每页 ${val} 条`);
            this.pageNum = val;
            this.getAllPerson();
        },
      	//当点击下一页，上一页，去到第几页时触发
        handleSizeChange(val){
            console.log(`当前页: ${val}`);
            this.pageNum = 1;
            this.pageSize = val;
            this.getAllPerson();
        }
    },

		//进入页面，先默认查询出第一页数据
    created: function () {
        this.getAllPerson();
    }
}
</script>>

4.后端代码

4.1 引入依赖

maven的pom.xml中引入PageHelper依赖

<dependency>
  <groupId>com.github.pagehelper</groupId>
  <artifactId>pagehelper-spring-boot-starter</artifactId>
  <version>1.2.3</version>
</dependency>

4.2 分页的核心Service代码(注意代码中的注释，说明了注意点点)

package com.codercode.page.sericve.impl;

import com.codercode.page.domain.Person;
import com.codercode.page.domain.PersonCondition;
import com.codercode.page.mapper.PersonMapper;
import com.codercode.page.sericve.PersonService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PersonServiceImpl implements PersonService {
    @Autowired
    private PersonMapper personMapper;

    @Override
    public PageInfo getAllPerson(Integer pageNum, Integer pageSize) {
        //1.首选需要查询总数量total
        Long total = personMapper.countByExample(new PersonCondition());
        //2.设置本次查询的pageNum(第几页)，pageSize(每页多少条) .此行一定要放到查询语句前
        PageHelper.startPage(pageNum,pageSize);
        //3.正常查询（无需在查询语句中加limit）
        List<Person> personList = personMapper.selectByExample(new PersonCondition());
        //4.封装返回数据，设置pageNum,pageSize,total,此次分页查询的具体数据
        PageInfo pageInfo = new PageInfo(personList);
        pageInfo.setPageNum(pageNum);
        pageInfo.setPageSize(pageSize);
        pageInfo.setTotal(total);
        return pageInfo;
    }

 4.2 分页的核心Controller层代码

前端传入pageNum（当前是第几页）和pageSize（每一页有多少条）

package com.codercode.page.controller;


import com.codercode.page.sericve.PersonService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("person")
public class PersonController {
    @Autowired
    private PersonService personService;

    @GetMapping("list")
    public PageInfo getAllPerson(@RequestParam Integer pageNum , @RequestParam Integer pageSize){
        return personService.getAllPerson(pageNum,pageSize);
    }
}

5.运行效果

• 支持修改每条显示数目

• 支持下一页，上一页，第N页

• 支持跳转到第M页