前文
这个是延伸版本，重复的话就不写了。前端小伙伴不懂的可以去看我写的另一个帖子已经写了简单的分页功能并讲解了逻辑。然后再来看这个效果更好。
【简单表格分页功能】前端用springboot写一个简单的表格分页功能并交互显示在网页上【详细注释，简易版本】
现在这个版本是在分页的基础上添加了模糊查询并分页的功能，也是前端表格的最常用基本功能了。
//这个功能的几个坑：
//1，比如数据出来后，当我们翻页到第二页的时候，我们再调整页数从10条到20条就会出现查不到数据的情况，
原因是你的页数传过来是2，从第二页开始查询20条，但是你的数据可能只有几条，根本第一页都没有塞满，
所以自然也没有第二页
//2，查询的时候：也是，正常数据出来了，我们翻到第二页后再输入值查询，这时候也会出现没有数据，原因也是
你的页数传了2过去了，但是你查询的数据只有一页，所以显示的没有数据。
//解决办法：很简单前端配合一下
//坑1：直接前端在调用该页数的方法时先把当前页改为1就可以了，这样只要改变页数发请求就会发当前页为1，
从第一页开始查找。
//坑2：也一样，让前端点击查询按钮的时候把当前页设为1就行了，点其他的时候不变还是老样子。
效果图
直接上代码
HistoryRecord（数据库对应字段的实体类）
package com.example.demo.entity;
//历史记录表
import lombok.Data;
@Data
public class HistoryRecord {
private int id;
private String suject;
private String time;
private String name;
private int content;
private int video;
private int knowledge;
private int simulation;
private int exam;
public HistoryRecord() {
}
public HistoryRecord(Integer id, String suject, String time, String name, Integer content, Integer video, Integer knowledge, Integer simulation, Integer exam) {
this.id = id;
this.suject = suject;
this.time = time;
this.name = name;
this.content = content;
this.video = video;
this.knowledge = knowledge;
this.simulation = simulation;
this.exam = exam;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getSuject() {
return suject;
}
public void setSuject(String suject) {
this.suject = suject;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getContent() {
return content;
}
public void setContent(Integer content) {
this.content = content;
}
public Integer getVideo() {
return video;
}
public void setVideo(Integer video) {
this.video = video;
}
public Integer getKnowledge() {
return knowledge;
}
public void setKnowledge(Integer knowledge) {
this.knowledge = knowledge;
}
public Integer getSimulation() {
return simulation;
}
public void setSimulation(Integer simulation) {
this.simulation = simulation;
}
public Integer getExam() {
return exam;
}
public void setExam(Integer exam) {
this.exam = exam;
}
}
HistoryRecordList（传给前端的实体类，用来把各个数据凑到一个对象内发送给前端）
package com.example.demo.entity;
import lombok.Data;
import java.util.List;
@Data
//传给前端的分页实体类
public class HistoryRecordList {
//总条数
private int total;
//表格数据
private List list;
//当前页
private int currentPage;
//每页数
private int pageSize;
public HistoryRecordList() {
}
public HistoryRecordList(int total, List list, int currentPage, int pageSize) {
this.total = total;
this.list = list;
this.currentPage = currentPage;
this.pageSize = pageSize;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
}
HistoryRecordMapper（后端对接数据库操作的接口文件）
package com.example.demo.mapper;
import com.example.demo.entity.HistoryRecord;
import com.example.demo.entity.HistoryRecordList;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface HistoryRecordMapper {
//搜索数据库分页对应数据,搜索数据库模糊查询(这里参数要这么写：like concat('%',#{searchValue},'%'))
//这句sql问的意思：查询条件为suject字段中前后包含有searchValue内字符的数据，并且分页查询返回对应数据。
@Select("select * from history_record where suject like concat('%',#{searchValue},'%') limit #{currentPage},#{pageSize}")
List<HistoryRecord> HistoryRecordAll(@Param("currentPage") int currentPage, @Param("pageSize") int pageSize,@Param("searchValue") String searchValue);
//搜索数据库数据总条数
@Select("SELECT count(*) FROM history_record")
int HistoryRecordIndex();
//搜索数据库数据条件筛选后的总条数
@Select("select count(*) from history_record where suject like concat('%',#{searchValue},'%')")
int HistoryRecordSearchIndex(@Param("searchValue") String searchValue);
}
HistoryRecordController（后端给前端写的接口的文件，给前端调用的接口就在这里，那个 /HistoryRecord/select 就是前端要调用的接口地址）
package com.example.demo.controller;
import com.example.demo.entity.HistoryRecord;
import com.example.demo.entity.HistoryRecordList;
import com.example.demo.mapper.HistoryRecordMapper;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("/HistoryRecord")
public class HistoryRecordController {
@Resource
HistoryRecordMapper HistoryRecordMapper;
@CrossOrigin(origins = "*", maxAge = 3600)
@GetMapping("/select")
//前端get请求发进来两个参数，分别为，当前页currentPage，每页数pageSize
public HistoryRecordList findHistoryRecord(@RequestParam("currentPage") int currentPage, @RequestParam("pageSize") int pageSize, @RequestParam("searchValue") String searchValue) {
if (searchValue == "") {
//判断：如果searchValue内为空，代表输入框没有输入值，那就正常查询所有表格数据返回
//当前页
int cuIndex = (currentPage - 1) * pageSize;
//调用数据库的方法返回的表格数据用数组保存
List list = HistoryRecordMapper.HistoryRecordAll(cuIndex, pageSize, searchValue);
//存下当前页
int currentPageIndex = currentPage;
//存下每页数
int pageSizeIndex = pageSize;
//调用数据库表格总数方法返回的值存下来
int totalIndex = HistoryRecordMapper.HistoryRecordIndex();
//new出要返回给前端的对象，不new出对象无法往里面赋值
HistoryRecordList historyRecordList = new HistoryRecordList();
//往对象内list添加表格数据
historyRecordList.setList(list);
//把当前页赋值进去
historyRecordList.setCurrentPage(currentPageIndex);
//把每页数赋值进去
historyRecordList.setPageSize(pageSizeIndex);
//把总数赋值进去
historyRecordList.setTotal(totalIndex);
//对象的数据上面赋值都拿到了，返回整个对象给前端
return historyRecordList;
} else {
//在搜索框输入了值就走这边。
//当前页
int cuIndex = (currentPage - 1) * pageSize;
//调用数据库的方法返回的表格数据用数组保存
List list = HistoryRecordMapper.HistoryRecordAll(cuIndex, pageSize, searchValue);
//存下当前页
int currentPageIndex = currentPage;
//存下每页数
int pageSizeIndex = pageSize;
//调用数据库表格总数方法返回的值存下来，这里专门调用的查询对应条件的总数方法
int totalIndex = HistoryRecordMapper.HistoryRecordSearchIndex(searchValue);
//new出要返回给前端的对象，不new出对象无法往里面赋值
HistoryRecordList historyRecordList = new HistoryRecordList();
//往对象内list添加表格数据
historyRecordList.setList(list);
//把当前页赋值进去
historyRecordList.setCurrentPage(currentPageIndex);
//把每页数赋值进去
historyRecordList.setPageSize(pageSizeIndex);
//把总数赋值进去
historyRecordList.setTotal(totalIndex);
//对象的数据上面赋值都拿到了，返回整个对象给前端
return historyRecordList;
}
}
}
前端代码（我这都是写给前端看的，这个就不解释了。肯定看得懂吧。）
<template>
<div class="release_wrap">
<div class="release_title">个 人 信 息</div>
<el-card class="release_card">
<el-button
type="primary"
round
icon="el-icon-arrow-left"
style="margin-bottom: 40px"
@click="jump_home"
>返回</el-button
>
<div>
<el-input
placeholder="请输入查询内容"
v-model="input"
clearable
style="width: 300px"
>
</el-input>
<el-button type="primary" style="margin-left: 20px" @click="getDataList1"
>查询</el-button
>
<el-tag type="success" style="margin-left: 540px">{
{
"已通过: " + exam_total
}}</el-tag>
<el-tag type="danger" style="margin-left: 20px">{
{
"未通过: " + nopass_total
}}</el-tag>
<el-tag type="info" style="margin-left: 20px">{
{
"科目总数: " + tableData.length + "/" + 188
}}</el-tag>
</div>
<el-table :data="tableData" style="width: 100%" max-height="600">
<el-table-column
prop="suject"
label="科目"
width="380"
show-overflow-tooltip
>
</el-table-column>
<el-table-column prop="time" label="学习时间" width="280">
</el-table-column>
<el-table-column prop="name" label="人员"> </el-table-column>
<el-table-column label="业务内容">
<template slot-scope="scope">
<el-button type="success" size="small" v-if="scope.row.content == 1"
>已学习</el-button
>
<el-button size="small" type="primary" v-else>未学习</el-button>
</template>
</el-table-column>
<el-table-column label="业务视频">
<template slot-scope="scope">
<el-button type="success" size="small" v-if="scope.row.video == 1"
>已学习</el-button
>
<el-button size="small" type="primary" v-else>未学习</el-button>
</template>
</el-table-column>
<el-table-column label="知识点">
<template slot-scope="scope">
<el-button
type="success"
size="small"
v-if="scope.row.knowledge == 1"
>已学习</el-button
>
<el-button size="small" type="primary" v-else>未学习</el-button>
</template>
</el-table-column>
<el-table-column label="模拟训练">
<template slot-scope="scope">
<el-button
type="success"
size="small"
v-if="scope.row.simulation == 1"
>已学习</el-button
>
<el-button size="small" type="primary" v-else>未学习</el-button>
</template>
</el-table-column>
<el-table-column label="业务考试">
<template slot-scope="scope">
<el-button type="success" size="small" v-if="scope.row.exam == 1"
>已通过</el-button
>
<el-button size="small" type="danger" v-else>未通过</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top: 15px"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next"
:total="totalindex"
>
</el-pagination>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
//表格数据
tableData: [],
//查询的输入框
input: "",
//当前页码
currentPage: 1,
//每页数
pagesize: 10,
//总数
totalindex: 0,
};
},
computed: {
exam_total() {
let a = this.tableData.filter(function (x, y) {
return x.exam == 1;
}).length;
return a;
},
pass_total() {
let b = this.tableData.filter(function (x, y) {
return x.state == 2;
}).length;
return b;
},
nopass_total() {
let c = this.tableData.filter(function (x, y) {
return x.exam == 0;
}).length;
return c;
},
},
created() {
this.getDataList();
},
methods: {
//页数
handleSizeChange(val) {
this.pagesize = val;
this.currentPage=1;
this.getDataList();
console.log(`每页 ${
val} 条`);
},
//当前页
handleCurrentChange(val) {
this.currentPage = val;
this.getDataList();
console.log(`当前页: ${
val}`);
},
//提交按钮
onSubmit() {
console.log(this.dynamicTags, "dynamicTags");
},
//返回首页
jump_home() {
this.$router.push("/");
},
//已学习·
jump_material(row) {
console.log(row);
},
//获取表格数据
getDataList() {
this.$axios
.get("/HistoryRecord/select", {
currentPage: this.currentPage,
pageSize: this.pagesize,
searchValue: this.input,
})
.then((res) => {
this.tableData = res.list;
this.totalindex = res.total;
console.log(res);
});
},
getDataList1() {
this.$axios
.get("/HistoryRecord/select", {
currentPage: 1,
pageSize: this.pagesize,
searchValue: this.input,
})
.then((res) => {
this.tableData = res.list;
this.totalindex = res.total;
console.log(res);
});
}
},
};
</script>
<style scoped lang='scss'>
.release_wrap {
background-image: url("../assets/home1.jpg");
width: 100%;
height: 100%;
position: relative;
}
//卡片效果
.release_card {
width: 70%;
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
transition: 0.5s ease; //改变大小
&:hover {
box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157),
0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28),
0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
}
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
// title效果
.release_title {
text-align: center;
font-size: 38px;
font-weight: bold;
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
font-family: Lato, sans-serif; //字体
letter-spacing: 4px; //字符间距空白
text-transform: uppercase; //转换文本，控制大小写
background: linear-gradient(
90deg,
rgba(0, 0, 0, 1) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(0, 0, 0, 1) 100%
);
background-size: 80%; //背景大小
background-repeat: no-repeat; //背景平铺不重复
// below two lines create text gradient effect
color: rgba(237, 227, 231, 0.7); //颜色透明
background-clip: text; //规定背景的绘制区域在文字上
animation: shining 3s linear infinite;
}
@keyframes shining {
from {
background-position: -500%; //背景图像的起始位置
}
to {
background-position: 500%; //背景图像的结束位置
}
}
</style>