• jquey+mybatis-plus实现简单分页功能

    这篇文章介绍一下怎么通过JQuery结合mybatis-plus的分页插件实现原生HTML页面的分页效果，没有使用任何前端框架，主要是对前端知识的应用。

    创建Springboot项目

    Intellij IDEA中创建一个Springboot项目，项目名为pager。

    添加必须的依赖包

    修改项目的pom.xml，添加一些基本的依赖：jdbc、mysql、mybatis、mybatis-plus、lombok、druid数据库连接池。

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     <modelVersion>4.0.0modelVersion>
    5.  
    6.     <parent>
    7.         <groupId>org.springframework.bootgroupId>
    8.         <artifactId>spring-boot-starter-parentartifactId>
    9.         <version>2.5.9version>
    10.         <relativePath />
    11.     parent>
    12.  
    13.     <groupId>cn.edu.sgu.wwwgroupId>
    14.     <artifactId>pagerartifactId>
    15.     <version>0.0.1-SNAPSHOTversion>
    16.     <name>pagername>
    17.     <description>jquey+mybatis-plus实现简单分页功能description>
    18.  
    19.     <properties>
    20.         <java.version>1.8java.version>
    21.         <mysql.version>8.0.28mysql.version>
    22.         <druid.version>1.1.21druid.version>
    23.         <lombok.version>1.18.22lombok.version>
    24.         <mybatis.version>2.2.2mybatis.version>
    25.         <mybatis-plus.version>3.5.1mybatis-plus.version>
    26.     properties>
    27.  
    28.     <dependencies>
    29.         <dependency>
    30.             <groupId>org.springframework.bootgroupId>
    31.             <artifactId>spring-boot-starter-webartifactId>
    32.         dependency>
    33.  
    34.         <dependency>
    35.             <groupId>org.springframework.bootgroupId>
    36.             <artifactId>spring-boot-starter-testartifactId>
    37.             <scope>testscope>
    38.         dependency>
    39.  
    40.         
    41.         <dependency>
    42.             <groupId>org.projectlombokgroupId>
    43.             <artifactId>lombokartifactId>
    44.             <version>${lombok.version}version>
    45.         dependency>
    46.  
    47.         
    48.         <dependency>
    49.             <groupId>mysqlgroupId>
    50.             <artifactId>mysql-connector-javaartifactId>
    51.             <version>${mysql.version}version>
    52.         dependency>
    53.  
    54.         
    55.         <dependency>
    56.             <groupId>com.alibabagroupId>
    57.             <artifactId>druidartifactId>
    58.             <version>${druid.version}version>
    59.         dependency>
    60.  
    61.         
    62.         <dependency>
    63.             <groupId>org.mybatis.spring.bootgroupId>
    64.             <artifactId>mybatis-spring-boot-starterartifactId>
    65.             <version>${mybatis.version}version>
    66.         dependency>
    67.  
    68.         
    69.         <dependency>
    70.             <groupId>com.baomidougroupId>
    71.             <artifactId>mybatis-plus-boot-starterartifactId>
    72.             <version>${mybatis-plus.version}version>
    73.         dependency>
    74.     dependencies>
    75.  
    76.     <build>
    77.         <plugins>
    78.             <plugin>
    79.                 <groupId>org.springframework.bootgroupId>
    80.                 <artifactId>spring-boot-maven-pluginartifactId>
    81.             plugin>
    82.         plugins>
    83.     build>
    84. project>

    添加数据源配置

    将项目默认的配置文件application.properties重命名为application.yml。

    添加启动端口、数据库、日志隔离级别的配置~

    1. server:
    2.   port: 8090
    3.  
    4. logging:
    5.   level:
    6.     cn.edu.sgu.www.pager: debug
    7.  
    8. spring:
    9.   application:
    10.     name: pager
    11.   datasource:
    12.     username: root
    13.     password: root
    14.     url: jdbc:mysql://localhost:3306/pager
    15.     driver-class-name: com.mysql.cj.jdbc.Driver
    16.     type: com.alibaba.druid.pool.DruidDataSource

    准备数据库表

    创建数据库pager，然后执行项目src/main/resources目录下的pager.sql脚本文件。

    添加mybatis-plus分页插件

    1. package cn.edu.sgu.www.pager.config;
    2.  
    3. import com.baomidou.mybatisplus.annotation.DbType;
    4. import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
    5. import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
    6. import org.springframework.context.annotation.Bean;
    7. import org.springframework.context.annotation.Configuration;
    8.  
    9. /**
    10.  * Mybatis-Plus配置类
    11.  * @author heyunlin
    12.  * @version 1.0
    13.  */
    14. @Configuration
    15. public class MybatisPlusConfig {
    16.  
    17.     @Bean
    18.     public MybatisPlusInterceptor mybatisPlusInterceptor() {
    19.         MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    20.  
    21.         // 添加分页插件
    22.         interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
    23.  
    24.         return interceptor;
    25.     }
    26.  
    27. }

    创建响应相关实体类

    响应状态码枚举类

    1. package cn.edu.sgu.www.pager.restful;
    2.  
    3. /**
    4.  * 响应状态码
    5.  * @author heyunlin
    6.  * @version 1.0
    7.  */
    8. public enum ResponseCode {
    9.     /**
    10.      * 请求成功
    11.      */
    12.     OK(200),
    13.     /**
    14.      * 失败的请求
    15.      */
    16.     BAD_REQUEST(400),
    17.     /**
    18.      * 未授权
    19.      */
    20.     UNAUTHORIZED(401),
    21.     /**
    22.      * 禁止访问
    23.      */
    24.     FORBIDDEN(403),
    25.     /**
    26.      * 找不到
    27.      */
    28.     NOT_FOUND(404),
    29.     /**
    30.      * 不可访问
    31.      */
    32.     NOT_ACCEPTABLE(406),
    33.     /**
    34.      * 冲突
    35.      */
    36.     CONFLICT(409),
    37.     /**
    38.      * 服务器发生异常
    39.      */
    40.     ERROR(500);
    41.  
    42.     private final Integer value;
    43.  
    44.     ResponseCode(Integer value) {
    45.         this.value = value;
    46.     }
    47.  
    48.     public Integer getValue() {
    49.         return value;
    50.     }
    51.  
    52. }

    web响应实体类

    1. package cn.edu.sgu.www.pager.restful;
    2.  
    3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    4. import lombok.Data;
    5.  
    6. import java.io.Serializable;
    7.  
    8. /**
    9.  * @author heyunlin
    10.  * @version 1.0
    11.  */
    12. @Data
    13. public class JsonResult implements Serializable {
    14.     private static final long serialVersionUID = 18L;
    15.  
    16.     /**
    17.      * 响应数据
    18.      */
    19.     private T data;
    20.  
    21.     /**
    22.      * 响应状态码
    23.      */
    24.     private Integer code;
    25.  
    26.     /**
    27.      * 响应提示信息
    28.      */
    29.     private String message;
    30.  
    31.     /**
    32.      * 请求是否成功
    33.      */
    34.     private boolean success;
    35.  
    36.     /**
    37.      * 成功提示
    38.      */
    39.     private static final String successMessage = "请求成功";
    40.  
    41.     public static  JsonResult success(String message, T data) {
    42.         JsonResult jsonResult = new JsonResult<>();
    43.  
    44.         jsonResult.setCode(ResponseCode.OK.getValue());
    45.         jsonResult.setMessage(message);
    46.         jsonResult.setSuccess(true);
    47.         jsonResult.setData(data);
    48.  
    49.         return jsonResult;
    50.     }
    51.  
    52.     public static  JsonResult> restPage(Page page) {
    53.         JsonPage jsonPage = JsonPage.restPage(page);
    54.  
    55.         return success(successMessage, jsonPage);
    56.     }
    57.  
    58. }

    分页查询结果

    1. package cn.edu.sgu.www.pager.restful;
    2.  
    3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    4. import lombok.Data;
    5.  
    6. import java.io.Serializable;
    7. import java.util.List;
    8.  
    9. /**
    10.  * @author heyunlin
    11.  * @version 1.0
    12.  */
    13. @Data
    14. public class JsonPage implements Serializable {
    15.     private static final long serialVersionUID = 18L;
    16.  
    17.     /**
    18.      * 总记录数
    19.      */
    20.     private Long total;
    21.  
    22.     /**
    23.      * 查询结果
    24.      */
    25.     private List rows;
    26.  
    27.     /**
    28.      * 根据Page对象构建JsonPage对象
    29.      * @param page Page
    30.      * @return JsonPage
    31.      */
    32.     public static  JsonPage restPage(Page page) {
    33.         JsonPage jsonPage = new JsonPage<>();
    34.  
    35.         jsonPage.setTotal(page.getTotal());
    36.         jsonPage.setRows(page.getRecords());
    37.  
    38.         return jsonPage;
    39.     }
    40.  
    41. }

     

    分页参数的对象

    1. package cn.edu.sgu.www.pager.restful;
    2.  
    3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    4. import lombok.Data;
    5.  
    6. /**
    7.  * @author heyunlin
    8.  * @version 1.0
    9.  */
    10. @Data
    11. public class Pager {
    12.  
    13.     /**
    14.      * 页数
    15.      */
    16.     private Integer page;
    17.  
    18.     /**
    19.      * 每页的记录数
    20.      */
    21.     private Integer rows;
    22.  
    23.     /**
    24.      * 根据Pager创建Page对象
    25.      * @param pager Pager
    26.      * @return Page
    27.      */
    28.     public static  Page ofPage(Pager pager) {
    29.         return new Page(pager.getPage(), pager.getRows());
    30.     }
    31.  
    32. }

    创建数据库实体类

    1. package cn.edu.sgu.www.pager.entity;
    2.  
    3. import com.fasterxml.jackson.annotation.JsonFormat;
    4. import lombok.Data;
    5.  
    6. import java.io.Serializable;
    7. import java.time.LocalDateTime;
    8.  
    9. /**
    10.  * @author heyunlin
    11.  * @version 1.0
    12.  */
    13. @Data
    14. public class Song implements Serializable {
    15.     private static final long serialVersionUID = 18L;
    16.  
    17.     private String id;
    18.  
    19.     /**
    20.      * 歌曲名
    21.      */
    22.     private String name;
    23.  
    24.     /**
    25.      * 歌手
    26.      */
    27.     private String singer;
    28.  
    29.     /**
    30.      * 描述信息
    31.      */
    32.     private String note;
    33.  
    34.     /**
    35.      * 最后一次修改时间
    36.      */
    37.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    38.     private LocalDateTime lastUpdateTime;
    39. }

    创建持久层接口

    继承mybatis-plus的BaseMapper接口

    1. package cn.edu.sgu.www.pager.mapper;
    2.  
    3. import cn.edu.sgu.www.pager.entity.Song;
    4. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    5. import org.apache.ibatis.annotations.Mapper;
    6.  
    7. /**
    8.  * @author heyunlin
    9.  * @version 1.0
    10.  */
    11. @Mapper
    12. public interface SongMapper extends BaseMapper {
    13.  
    14. }

    创建业务层接口

    SongService

    1. package cn.edu.sgu.www.pager.service;
    2.  
    3. import cn.edu.sgu.www.pager.entity.Song;
    4. import cn.edu.sgu.www.pager.restful.Pager;
    5. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    6.  
    7. /**
    8.  * @author heyunlin
    9.  * @version 1.0
    10.  */
    11. public interface SongService {
    12.  
    13.     /**
    14.      * 分页查询歌曲列表
    15.      * @param pager 分页参数
    16.      * @return Page
    17.      */
    18.     Page selectByPage(Pager pager);
    19. }

    SongServiceImpl

    1. package cn.edu.sgu.www.pager.service.impl;
    2.  
    3. import cn.edu.sgu.www.pager.entity.Song;
    4. import cn.edu.sgu.www.pager.mapper.SongMapper;
    5. import cn.edu.sgu.www.pager.restful.Pager;
    6. import cn.edu.sgu.www.pager.service.SongService;
    7. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Service;
    10.  
    11. /**
    12.  * @author heyunlin
    13.  * @version 1.0
    14.  */
    15. @Service
    16. public class SongServiceImpl implements SongService {
    17.  
    18.     private final SongMapper songMapper;
    19.  
    20.     @Autowired
    21.     public SongServiceImpl(SongMapper songMapper) {
    22.         this.songMapper = songMapper;
    23.     }
    24.  
    25.     @Override
    26.     public Page selectByPage(Pager pager) {
    27.         Page page = Pager.ofPage(pager);
    28.  
    29.         return songMapper.selectPage(page, null);
    30.     }
    31.  
    32. }

    创建控制器类

    1. package cn.edu.sgu.www.pager.controller;
    2.  
    3. import cn.edu.sgu.www.pager.entity.Song;
    4. import cn.edu.sgu.www.pager.restful.JsonPage;
    5. import cn.edu.sgu.www.pager.restful.JsonResult;
    6. import cn.edu.sgu.www.pager.restful.Pager;
    7. import cn.edu.sgu.www.pager.service.SongService;
    8. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.web.bind.annotation.GetMapping;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.RestController;
    13.  
    14. /**
    15.  * @author heyunlin
    16.  * @version 1.0
    17.  */
    18. @RestController
    19. @RequestMapping(path = "/song", produces = "application/json;charset=utf-8")
    20. public class SongController {
    21.  
    22.     private final SongService songService;
    23.  
    24.     @Autowired
    25.     public SongController(SongService songService) {
    26.         this.songService = songService;
    27.     }
    28.  
    29.     @GetMapping("/selectByPage")
    30.     public JsonResult> selectByPage(Pager pager) {
    31.         Page page = songService.selectByPage(pager);
    32.  
    33.         return JsonResult.restPage(page);
    34.     }
    35.  
    36. }

    创建前端页面

    song_list.html

    在页面创建一个带标题的表格，然后在表格下方创建一个简单的分页组件~

    可以调整每页显示几条数据，上一页、下一页、指定页数的跳转。

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>权限管理页面title>
    6.         <script src="/js/jquery.min.js">script>
    7.         <script src="/js/ajaxUtils.js">script>
    8.         <script src="/js/song_list.js">script>
    9.         <style>
    10.             .table {
    11.                 height: 635px;
    12.                 overflow-y: scroll;
    13.                 border: 1px black solid;
    14.             }
    15.  
    16.             #pageNum {
    17.                 width: 50px;
    18.             }
    19.         style>
    20.     head>
    21.  
    22.     <body>
    23.         <div class="table">
    24.             <table border="1">
    25.                 <thead>歌曲列表thead>
    26.  
    27.                 <tbody id="song_list">tbody>
    28.             table>
    29.         div>
    30.  
    31.         <div>
    32.             每页展示<select id="rows">select>条记录 
    33.             <button type="button" id="pre">上一页button> 
    34.             当前第<span id="page">1span>页 
    35.             <button type="button" id="next">下一页button> 
    36.             前往第<input type="number" id="pageNum" />页
    37.         div>
    38.     body>
    39. html>

    song_list.js

    1. /**
    2.  * 总页数
    3.  */
    4. let total;
    5. /**
    6.  * 当前页
    7.  */
    8. let page = 1;
    9. /**
    10.  * 每页显示的记录数
    11.  */
    12. let rows = 15;
    13. /**
    14.  * 页码
    15.  */
    16. let pageList = [15, 50 ,100, 200, 500];
    17.  
    18. /**
    19.  * 加载表格数据
    20.  */
    21. function loadData() {
    22.     /**
    23.      * 表头
    24.      */
    25.     let thead = "";
    26.     /**
    27.      * 表格体
    28.      */
    29.     let tbody = "";
    30.  
    31.     thead += "";
    32.     thead += "歌曲ID";
    33.     thead += "歌曲名";
    34.     thead += "歌手";
    35.     thead += "歌曲信息";
    36.     thead += "最后一次修改时间";
    37.     thead += "";
    38.  
    39.     ajaxGet("/song/selectByPage", {
    40.         page: page,
    41.         rows: rows
    42.     }, function (resp) {
    43.         let data = resp.data;
    44.         let list = data.rows;
    45.  
    46.         total = data.total;
    47.  
    48.         for (let i = 0; i < list.length; i++) {
    49.             let data = list[i];
    50.  
    51.             tbody += "";
    52.             tbody += "" + data.id + "";
    53.             tbody += "" + data.name + "";
    54.             tbody += "" + data.singer + "";
    55.             tbody += "" + data.note + "";
    56.             tbody += "" + data.lastUpdateTime + "";
    57.             tbody += "";
    58.         }
    59.  
    60.         $("#song_list").empty().append(thead + tbody);
    61.     }, error);
    62. }
    63.  
    64. /**
    65.  * 渲染分页组件
    66.  */
    67. function fetchRows() {
    68.     let options = "";
    69.  
    70.     for (let i = 0; i < pageList.length; i++) {
    71.         let page = pageList[i];
    72.  
    73.         options += " + page + "";
    74.     }
    75.  
    76.     $("#rows").append(options);
    77. }
    78.  
    79. $(document).ready(function () {
    80.  
    81.     // 加载表格数据
    82.     loadData();
    83.  
    84.     // 渲染分页组件
    85.     fetchRows();
    86.  
    87.     /**
    88.      * 绑定下拉框改变事件
    89.      */
    90.     $("#rows").change(function () {
    91.         // 设置每页记录数为下拉框的值
    92.         rows = $(this).val();
    93.  
    94.         loadData();
    95.     });
    96.  
    97.     /**
    98.      * 上一页
    99.      */
    100.     $("#pre").on("click", function () {
    101.         if (page > 1) {
    102.             page--;
    103.  
    104.             // 重新加载表格数据
    105.             loadData();
    106.  
    107.             // 设置当前是第几页
    108.             $("#page").html(page);
    109.         }
    110.     });
    111.  
    112.     /**
    113.      * 下一页
    114.      */
    115.     $("#next").on("click", function () {
    116.         let maxPage = (total % rows) > 0 ? (total / rows + 1) : (total / rows);
    117.  
    118.         if (page <= maxPage - 1) {
    119.             page++;
    120.  
    121.             // 重新加载表格数据
    122.             loadData();
    123.  
    124.             // 设置当前是第几页
    125.             $("#page").html(page);
    126.         }
    127.     });
    128.  
    129.     /**
    130.      * 绑定键盘事件
    131.      */
    132.     $("#pageNum").keydown(function () {
    133.         let event = window.event;
    134.  
    135.         // 不允许输入空格
    136.         if(event.keyCode === 32) {
    137.             event.returnValue = false;
    138.         } else if(event.keyCode === 13) {
    139.             // 获取最大页数
    140.             let maxPage = total % rows > 0 ? (total / rows + 1) : (total / rows);
    141.             // 获取输入框内容
    142.             let pageNum = parseInt($(this).val());
    143.  
    144.             // 修改页数
    145.             page = pageNum > maxPage ? maxPage : pageNum;
    146.  
    147.             // 加载表格
    148.             loadData();
    149.  
    150.             // 设置当前输入框的值
    151.             $(this).val(page);
    152.  
    153.             // 设置当前在第几页
    154.             $("#page").html(page);
    155.         }
    156.     });
    157.  
    158. });

    好了，文章就分享到这里了，需要代码的可以从git下载：

    jquey+mybatis-plus实现简单分页功能icon-default.png?t=N7T8https://gitee.com/muyu-chengfeng/pager.git

  • 相关阅读:
    在一次又一次的失败中, 我总结了这份万字的《MySQL 性能调优笔记》
    一文概括AxureRP的优缺点和替代软件
    【华为OD机试】分苹果【2023 B卷|100分】
    牛血清白蛋白/人血清白蛋白/卵清白蛋白/小鼠血清白蛋白纳米粒改性Angiopep血管肽（2022已更新）
    # SpringBoot 集成 Netty
    数据结构(十一) -- 树(三) -- 堆排序
    Spring整合RabbitMQ
    敏感词检测库ToolGood.Words中IllegalWordsSearch类使用简介
    PyTorch笔记 - LSTM(Long Short-Term Memory) 和 LSTMP(Projection)
    应用方案 | 内置ALC的音频前置放大器D2538A和D3308芯片
  • 原文地址：https://blog.csdn.net/heyl163_/article/details/139773438