免费页面设计模板,宁波正规seo企业优化,个人在线做网站免费,邯郸做网站的电话这篇文章介绍一下怎么通过JQuery结合mybatis-plus的分页插件实现原生HTML页面的分页效果#xff0c;没有使用任何前端框架#xff0c;主要是对前端知识的应用。 创建Springboot项目
Intellij IDEA中创建一个Springboot项目#xff0c;项目名为pager。 添加必须的依赖包
修…这篇文章介绍一下怎么通过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-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.5.9/versionrelativePath //parentgroupIdcn.edu.sgu.www/groupIdartifactIdpager/artifactIdversion0.0.1-SNAPSHOT/versionnamepager/namedescriptionjqueymybatis-plus实现简单分页功能/descriptionpropertiesjava.version1.8/java.versionmysql.version8.0.28/mysql.versiondruid.version1.1.21/druid.versionlombok.version1.18.22/lombok.versionmybatis.version2.2.2/mybatis.versionmybatis-plus.version3.5.1/mybatis-plus.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency!--lombok--dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion${lombok.version}/version/dependency!--mysql--dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion${mysql.version}/version/dependency!--druid数据库连接池--dependencygroupIdcom.alibaba/groupIdartifactIddruid/artifactIdversion${druid.version}/version/dependency!--mybatis--dependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion${mybatis.version}/version/dependency!--mybatis-plus--dependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion${mybatis-plus.version}/version/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build
/project 添加数据源配置
将项目默认的配置文件application.properties重命名为application.yml。
添加启动端口、数据库、日志隔离级别的配置~
server:port: 8090logging:level:cn.edu.sgu.www.pager: debugspring:application:name: pagerdatasource:username: rootpassword: rooturl: jdbc:mysql://localhost:3306/pagerdriver-class-name: com.mysql.cj.jdbc.Drivertype: 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 heyunlin* version 1.0*/
Configuration
public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();// 添加分页插件interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}} 创建响应相关实体类
响应状态码枚举类
package cn.edu.sgu.www.pager.restful;/*** 响应状态码* author heyunlin* 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 heyunlin* 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 heyunlin* 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 heyunlin* 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 heyunlin* 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 heyunlin* version 1.0*/
Mapper
public interface SongMapper extends BaseMapperSong {} 创建业务层接口
SongService
package 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 heyunlin* version 1.0*/
public interface SongService {/*** 分页查询歌曲列表* param pager 分页参数* return PageSong*/PageSong selectByPage(PagerSong pager);
} SongServiceImpl
package 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 heyunlin* version 1.0*/
Service
public class SongServiceImpl implements SongService {private final SongMapper songMapper;Autowiredpublic SongServiceImpl(SongMapper songMapper) {this.songMapper songMapper;}Overridepublic 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 heyunlin* version 1.0*/
RestController
RequestMapping(path /song, produces application/json;charsetutf-8)
public class SongController {private final SongService songService;Autowiredpublic 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
htmlheadmeta charsetUTF-8title权限管理页面/titlescript src/js/jquery.min.js/scriptscript src/js/ajaxUtils.js/scriptscript src/js/song_list.js/scriptstyle.table {height: 635px;overflow-y: scroll;border: 1px black solid;}#pageNum {width: 50px;}/style/headbodydiv classtabletable border1thead歌曲列表/theadtbody idsong_list/tbody/table/divdiv每页展示select idrows/select条记录emsp;button typebutton idpre上一页/buttonemsp;当前第span idpage1/span页emsp;button typebutton idnext下一页/buttonemsp;前往第input typenumber idpageNum /页/div/body
/html song_list.js
/*** 总页数*/
let total;
/*** 当前页*/
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);
}/*** 渲染分页组件*/
function fetchRows() {let options ;for (let i 0; i pageList.length; i) {let page pageList[i];options option value page page /option;}$(#rows).append(options);
}$(document).ready(function () {// 加载表格数据loadData();// 渲染分页组件fetchRows();/*** 绑定下拉框改变事件*/$(#rows).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).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);}});}); 好了文章就分享到这里了需要代码的可以从git下载
jqueymybatis-plus实现简单分页功能https://gitee.com/muyu-chengfeng/pager.git
