点击上方 web项目开发,选择 设为星标
优质文章,及时送达
效果图
前端页面


环境介绍
jdk:1.8
数据库:mysql
前端:tymeleaf
后端:springboot+jpa
如果你在运行这个代码的过程中有遇到问题,请加小编微信xxf960513,我拉你进对应微信学习群!!帮助你快速掌握这个功能代码!
核心代码介绍
pox.xml
<dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-data-jpaartifactId> dependency> <dependency> <groupId>mysqlgroupId> <artifactId>mysql-connector-javaartifactId> <scope>runtimescope> dependency> <dependency> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-thymeleafartifactId> dependency>mysql
DROP TABLE IF EXISTS `demo`;CREATE TABLE `demo` ( `id` int(11) NOT NULL AUTO_INCREMENT, `create_time` datetime DEFAULT NULL, `des` longtext, `modify_time` datetime DEFAULT NULL, `name` varchar(50) DEFAULT NULL, `remark` varchar(1024) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8;-- ------------------------------ Records of demo-- ----------------------------BEGIN;INSERT INTO `demo` VALUES (1, '2020-05-13 23:27:34', 'java是第一语言', '2020-05-13 23:28:14', 'java', '跟阿牛学java');INSERT INTO `demo` VALUES (2, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');INSERT INTO `demo` VALUES (3, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');INSERT INTO `demo` VALUES (6, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');INSERT INTO `demo` VALUES (10, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');INSERT INTO `demo` VALUES (11, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');INSERT INTO `demo` VALUES (13, '2020-05-13 23:27:34', 'javaee', '2020-05-13 23:28:14', '开发必备', '跟阿牛学java');COMMIT;application.yml
server: port: 9080spring: servlet: multipart: max-file-size: 100MB max-request-size: 100MB datasource: driverClassName: com.mysql.jdbc.Driver url: jdbc:mysql://localhost/tests?characterEncoding=UTF8&useSSL=false username: root password: asdf678987 jpa: database: MySQL show-sql: true hibernate: ddl-auto: update database-platform: org.hibernate.dialect.MySQL5InnoDBDialect open-in-view: false thymeleaf: cache: false prefix: classpath:/templates/ suffix: .html servlet: content-type: text/html mode: HTML5 encoding: UTF-8 resources: chain: strategy: content: enabled: true paths: /**Pager.java
package com.feige.tymeleaf.common;import java.io.Serializable;import java.util.ArrayList;import java.util.List;public class Pager<T> implements Serializable { private static final long serialVersionUID = 4476276522269472300L; /** * currentPage 当前页 */ private int currentPage = 1; /** * pageSize 每页大小 */ private int pageSize = 20; /** * pageTotal 总页数 */ private int pageTotal; /** * recordTotal 总条数 */ private int recordTotal = 0; /** * firstPage 第一页 */ private int firstPage = 1; /** * content 每页的内容 */ private List content; /** * pager构造器 * * @param content */ public Pager(List content, int currentPage, int pageSize) { super(); this.content = content; this.currentPage = currentPage; this.pageSize = pageSize; this.otherAttr(); } public Pager(List content, int currentPage) { super(); this.content = content; this.currentPage = currentPage; this.otherAttr(); } public Pager(List content) { super(); this.content = content; this.otherAttr(); } /** * pager获取分好页的数据记录 * * @return */ public ListgetPageContent() { if (this.content == null || this.content.size() < 1) return null; List pageContent = new ArrayList(); //当前页的第一行为:(页码-1)x每页行数 int firstLine = (this.currentPage - 1) * this.pageSize; //当前页的第最后行为:页码-x每页行数-1(如果最后一页为最大行数) int lastLine = this.currentPage == this.pageTotal ? this.recordTotal : this.currentPage * this.pageSize; for (int i = firstLine; i < lastLine; i++) { pageContent.add(this.content.get(i)); } return pageContent; } // 以下set方式是需要赋值的 /** * 设置当前页 * * @param currentPage */ public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } /** * 设置每页大小,也可以不用赋值,默认大小为10条 * * @param pageSize */ public void setPageSize(int pageSize) { this.pageSize = pageSize; } /** * 设置总条数,默认为0 * * @param recordTotal */ public void setRecordTotal(int recordTotal) { this.recordTotal = recordTotal; otherAttr(); } /** * 设置分页内容 * * @param content */ public void setContent(List content) { this.content = content; } /** * 设置其他参数 */ public void otherAttr() { if (this.content != null) { // 总条数 this.recordTotal = this.content.size(); // 总页数 this.pageTotal = this.recordTotal % this.pageSize > 0 ? this.recordTotal / this.pageSize + 1 : this.recordTotal / this.pageSize; // 设置并调整当前页 if (this.currentPage < 1) this.currentPage = 1; else if (this.currentPage > this.pageTotal) this.currentPage = this.pageTotal; } } /** * @return the pageTotal */ public int getPageTotal() { return pageTotal; } /** * @param pageTotal the pageTotal to set */ public void setPageTotal(int pageTotal) { this.pageTotal = pageTotal; } /** * @return the firstPage */ public int getFirstPage() { return firstPage; } /** * @param firstPage the firstPage to set */ public void setFirstPage(int firstPage) { this.firstPage = firstPage; } /** * @return the serialversionuid */ public static long getSerialversionuid() { return serialVersionUID; } /** * @return the currentPage */ public int getCurrentPage() { return currentPage; } /** * @return the pageSize */ public int getPageSize() { return pageSize; } /** * @return the recordTotal */ public int getRecordTotal() { return recordTotal; } /** * @return the content */ public ListgetContent() { return content; } /* (non-Javadoc) * @see java.lang.Object#toString() */ @Override public String toString() { StringBuilder builder = new StringBuilder(); builder.append("Pager :{currentPage="); builder.append(currentPage); builder.append(", pageSize="); builder.append(pageSize); builder.append(", pageTotal="); builder.append(pageTotal); builder.append(", recordTotal="); builder.append(recordTotal); builder.append(", firstPage="); builder.append(firstPage); builder.append(", content="); builder.append(content); builder.append("}"); return builder.toString(); }}TestController.java
package com.feige.tymeleaf.controller;import com.feige.tymeleaf.common.Pager;import com.feige.tymeleaf.common.Result;import com.feige.tymeleaf.common.StatusCode;import com.feige.tymeleaf.entity.Test;import com.feige.tymeleaf.service.TestService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import java.util.Map;@RestController@RequestMapping("")public class TestController { @Autowired TestService testServiceImpl; @RequestMapping(value="") public ModelAndView test(@RequestParam Map<String,String> map) throws Exception { ModelAndView mv = new ModelAndView("index"); Pager<Test> pager = testServiceImpl.findAll(map,2); mv.addObject("listAll", pager.getPageContent()); mv.addObject("pageTotal", pager.getPageTotal()); mv.addObject("page", pager.getCurrentPage()); mv.addObject("Result","查询成功!"); return mv; }}index.html
<html xmlns:th="http://www.thymeleaf.org"><head th:replace="common::head('测试')"><meta charset="UTF-8">head><body><div class="table-responsive"> <table class="table table-striped" style="text-align: center;table-layout:fixed;" id="tableOne"> <thead> <tr class="table_tr"> <th style="width:45px;text-align: center;">序号th> <th style="width:50px;text-align: center;">课程名称th> <th style="width:120px;text-align: center;">课程简介th> <th style="width:80px;text-align: center;">发布时间th> <th style="width:80px;text-align: center;">修改时间th> <th style="width:80px;text-align: center;">备注th> tr> thead> <tbody> <tr th:each="tm,tmStat:${listAll}"> <td th:text="${tmStat.count}">td> <td class="yin" th:text="${}">td> <td class="yin" th:text="${tm.des}">td> <td class="yin dates" th:text="${tm.createTime}">td> <td class="yin dates" th:text="${tm.modifyTime}">td> <td class="yin dates" th:text="${tm.remark}">td> tr> tbody> table> <div th:replace="common::btn_pager">div>div><div th:replace="common::scripts">div><script language="javascript"> function changeColor(){ var color="#f00|容#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.split("|"); document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)]; document.getElementById("blink2").style.color=color[parseInt(Math.random() * color.length)]; } setInterval("changeColor()",200);script>body>html>
















