JQuey+Mybatis-Plus实现简单分页功能

这篇文章介绍一下怎么通过JQuery结合mybatis-plus的分页插件实现原生HTML页面的分页效果没有使用任何前端框架主要是对前端知识的应用。创建Springboot项目Intellij IDEA中创建一个Springboot项目项目名为pager。添加必须的依赖包修改项目的pom.xml添加一些基本的依赖jdbc、mysql、mybatis、mybatis-plus、lombok、druid数据库连接池。?xml version1.0 encodingUTF-8? project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd modelVersion4.0.0/modelVersion parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.3.4.RELEASE/version relativePath / /parent groupIdcn.edu.sgu.www/groupId artifactIdpager/artifactId version0.0.1-SNAPSHOT/version descriptionjqueymybatis-plus实现简单分页功能/description developers developer idmuyu-chengfeng/id name沐雨橙风ιε/name emailheyl163_com163.com/email urlhttps://blog.csdn.net/heyl163_/url roles roledeveloper/role /roles timezoneAsia/Shanghai/timezone /developer /developers scm urlhttps://gitee.com/muyu-chengfeng/pager.git/url /scm properties java.version1.8/java.version mysql.version8.0.28/mysql.version druid.version1.1.21/druid.version lombok.version1.18.22/lombok.version mybatis.version2.2.2/mybatis.version mybatis-plus.version3.5.1/mybatis-plus.version /properties dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId scopetest/scope /dependency !--lombok-- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId version${lombok.version}/version /dependency !--mysql-- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version${mysql.version}/version /dependency !--druid数据库连接池-- dependency groupIdcom.alibaba/groupId artifactIddruid/artifactId version${druid.version}/version /dependency !--mybatis-- dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version${mybatis.version}/version /dependency !--mybatis-plus-- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version${mybatis-plus.version}/version /dependency /dependencies build plugins plugin groupIdorg.springframework.boot/groupId artifactIdspring-boot-maven-plugin/artifactId /plugin /plugins /build /project添加数据源配置将项目默认的配置文件application.properties重命名为application.yml。添加启动端口、数据库、日志隔离级别的配置~server: port: 8090 logging: level: cn.edu.sgu.www.pager: debug spring: application: name: pager datasource: username: root password: root url: jdbc:mysql://localhost:3306/pager driver-class-name: com.mysql.cj.jdbc.Driver type: com.alibaba.druid.pool.DruidDataSource准备数据库表创建数据库pager然后执行项目src/main/resources目录下的pager.sql脚本文件。添加mybatis-plus分页插件package cn.edu.sgu.www.pager.config; import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; /** * Mybatis-Plus配置类 * author 沐雨橙风ιε * version 1.0 */ Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); // 添加分页插件 interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }创建响应相关实体类响应状态码枚举类package cn.edu.sgu.www.pager.restful; /** * 响应状态码 * author 沐雨橙风ιε * version 1.0 */ public enum ResponseCode { /** * 请求成功 */ OK(200), /** * 失败的请求 */ BAD_REQUEST(400), /** * 未授权 */ UNAUTHORIZED(401), /** * 禁止访问 */ FORBIDDEN(403), /** * 找不到 */ NOT_FOUND(404), /** * 不可访问 */ NOT_ACCEPTABLE(406), /** * 冲突 */ CONFLICT(409), /** * 服务器发生异常 */ ERROR(500); private final Integer value; ResponseCode(Integer value) { this.value value; } public Integer getValue() { return value; } }web响应实体类package cn.edu.sgu.www.pager.restful; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import lombok.Data; import java.io.Serializable; /** * author 沐雨橙风ιε * version 1.0 */ Data public class JsonResultT implements Serializable { private static final long serialVersionUID 18L; /** * 响应数据 */ private T data; /** * 响应状态码 */ private Integer code; /** * 响应提示信息 */ private String message; /** * 请求是否成功 */ private boolean success; /** * 成功提示 */ private static final String successMessage 请求成功; public static T JsonResultT success(String message, T data) { JsonResultT jsonResult new JsonResult(); jsonResult.setCode(ResponseCode.OK.getValue()); jsonResult.setMessage(message); jsonResult.setSuccess(true); jsonResult.setData(data); return jsonResult; } public static T JsonResultJsonPageT restPage(PageT page) { JsonPageT jsonPage JsonPage.restPage(page); return success(successMessage, jsonPage); } }分页查询结果package cn.edu.sgu.www.pager.restful; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import lombok.Data; import java.io.Serializable; import java.util.List; /** * author 沐雨橙风ιε * version 1.0 */ Data public class JsonPageT implements Serializable { private static final long serialVersionUID 18L; /** * 总记录数 */ private Long total; /** * 查询结果 */ private ListT rows; /** * 根据Page对象构建JsonPage对象 * param page PageT * return JsonPageT */ public static T JsonPageT restPage(PageT page) { JsonPageT jsonPage new JsonPage(); jsonPage.setTotal(page.getTotal()); jsonPage.setRows(page.getRecords()); return jsonPage; } }分页参数的对象package cn.edu.sgu.www.pager.restful; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import lombok.Data; /** * author 沐雨橙风ιε * version 1.0 */ Data public class PagerT { /** * 页数 */ private Integer page; /** * 每页的记录数 */ private Integer rows; /** * 根据Pager创建Page对象 * param pager Pager * return Page */ public static T PageT ofPage(PagerT pager) { return new PageT(pager.getPage(), pager.getRows()); } }创建数据库实体类package cn.edu.sgu.www.pager.entity; import com.fasterxml.jackson.annotation.JsonFormat; import lombok.Data; import java.io.Serializable; import java.time.LocalDateTime; /** * author 沐雨橙风ιε * version 1.0 */ Data public class Song implements Serializable { private static final long serialVersionUID 18L; private String id; /** * 歌曲名 */ private String name; /** * 歌手 */ private String singer; /** * 描述信息 */ private String note; /** * 最后一次修改时间 */ JsonFormat(pattern yyyy-MM-dd HH:mm:ss, timezone GMT8) private LocalDateTime lastUpdateTime; }创建持久层接口继承mybatis-plus的BaseMapper接口package cn.edu.sgu.www.pager.mapper; import cn.edu.sgu.www.pager.entity.Song; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import org.apache.ibatis.annotations.Mapper; /** * author 沐雨橙风ιε * version 1.0 */ Mapper public interface SongMapper extends BaseMapperSong { }创建业务层接口SongServicepackage cn.edu.sgu.www.pager.service; import cn.edu.sgu.www.pager.entity.Song; import cn.edu.sgu.www.pager.restful.Pager; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; /** * author 沐雨橙风ιε * version 1.0 */ public interface SongService { /** * 分页查询歌曲列表 * param pager 分页参数 * return PageSong */ PageSong selectByPage(PagerSong pager); }SongServiceImplpackage cn.edu.sgu.www.pager.service.impl; import cn.edu.sgu.www.pager.entity.Song; import cn.edu.sgu.www.pager.mapper.SongMapper; import cn.edu.sgu.www.pager.restful.Pager; import cn.edu.sgu.www.pager.service.SongService; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; /** * author 沐雨橙风ιε * version 1.0 */ Service public class SongServiceImpl implements SongService { private final SongMapper songMapper; Autowired public SongServiceImpl(SongMapper songMapper) { this.songMapper songMapper; } Override public PageSong selectByPage(PagerSong pager) { PageSong page Pager.ofPage(pager); return songMapper.selectPage(page, null); } }创建控制器类package cn.edu.sgu.www.pager.controller; import cn.edu.sgu.www.pager.entity.Song; import cn.edu.sgu.www.pager.restful.JsonPage; import cn.edu.sgu.www.pager.restful.JsonResult; import cn.edu.sgu.www.pager.restful.Pager; import cn.edu.sgu.www.pager.service.SongService; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; 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.RestController; /** * author 沐雨橙风ιε * version 1.0 */ RestController RequestMapping(path /song, produces application/json;charsetutf-8) public class SongController { private final SongService songService; Autowired public SongController(SongService songService) { this.songService songService; } GetMapping(/selectByPage) public JsonResultJsonPageSong selectByPage(PagerSong pager) { PageSong page songService.selectByPage(pager); return JsonResult.restPage(page); } }创建前端页面song_list.html在页面创建一个带标题的表格然后在表格下方创建一个简单的分页组件~可以调整每页显示几条数据上一页、下一页、指定页数的跳转。!DOCTYPE html html head meta charsetUTF-8 / title歌曲管理页面/title script src/js/jquery.min.js/script script src/js/ajaxUtils.js/script script src/js/song_list.js/script style .table { height: 470px; overflow-y: scroll; border: 1px black solid; } #pageNum { width: 50px; } /style /head body div classtable table border1 thead歌曲列表/thead tbody idsong_list/tbody /table /div div 每页展示select idrows/select条记录emsp; button typebutton idpre上一页/buttonemsp; 当前第span idpage1/span页emsp; button typebutton idnext下一页/buttonemsp; 前往第input typenumber idpageNum /页emsp; 共span idtotal/span条记录 /div /body /htmlsong_list.js/** * 总记录数 */ let total 0; /** * 当前页 */ let page 1; /** * 每页显示的记录数 */ let rows 15; /** * 页码 */ let pageList [15, 50 ,100, 200, 500]; /** * 加载表格数据 */ function loadData() { /** * 表头 */ let thead ; /** * 表格体 */ let tbody ; thead tr; thead th歌曲ID/th; thead th歌曲名/th; thead th歌手/th; thead th歌曲信息/th; thead th最后一次修改时间/th; thead /tr; ajaxGet(/song/selectByPage, { page: page, rows: rows }, function (resp) { let data resp.data; let list data.rows; total data.total; for (let i 0; i list.length; i) { let data list[i]; tbody tr; tbody td data.id /td; tbody td data.name /td; tbody td data.singer /td; tbody td data.note /td; tbody td data.lastUpdateTime /td; tbody /tr; } $(#song_list).empty().append(thead tbody); }, error, false); } /** * 渲染分页组件 */ function fetchPager() { let options ; for (let i 0; i pageList.length; i) { let page pageList[i]; options option value page page /option; } /** * 绑定下拉框改变事件 */ $(#rows).append(options).change(function () { // 设置每页记录数为下拉框的值 rows $(this).val(); loadData(); }); /** * 上一页 */ $(#pre).on(click, function () { if (page 1) { page--; // 重新加载表格数据 loadData(); // 设置当前是第几页 $(#page).html(page); } }); /** * 下一页 */ $(#next).on(click, function () { let maxPage (total % rows) 0 ? (total / rows 1) : (total / rows); if (page maxPage - 1) { page; // 重新加载表格数据 loadData(); // 设置当前是第几页 $(#page).html(page); } }); /** * 绑定键盘事件 */ $(#pageNum).on(keydown, function () { let event window.event; // 不允许输入空格 if(event.keyCode 32) { event.returnValue false; } else if(event.keyCode 13) { // 获取最大页数 let maxPage total % rows 0 ? (total / rows 1) : (total / rows); // 获取输入框内容 let pageNum parseInt($(this).val()); // 修改页数 page pageNum maxPage ? ~~maxPage : pageNum; // 加载表格 loadData(); // 设置当前输入框的值 $(this).val(page); // 设置当前在第几页 $(#page).html(page); } }); $(#total).html(total); } $(document).ready(function () { // 加载表格数据 loadData(); // 渲染分页组件 fetchPager(); });好了文章就分享到这里了需要代码的可以从git下载jqueymybatis-plus实现简单分页功能https://gitee.com/muyu-chengfeng/pager.git