Gson gson =new GsonBuilder().setDateFormat("日期格式").create();使用map集合将总页数和查询数据，封装到map集合传入到前端，前端用resp.data.total和resp.data.list接收数据，total：查询的总页数，list:查询的总页数 ,前端elementui用分页组件将定义的当前页page和当前页显示的几行数据size显示传到服务器
eg:
@WebServlet("/PageServlet")
public class PageServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/*将数据放入map集合中，传入到前端*/
Map<String,Object> map = new HashMap<>();
/*先获取前端的当前页和每页显示的行数*/
int page = Integer.parseInt(request.getParameter("page"));
int size = Integer.parseInt(request.getParameter("size"));
StudentDao studentDao = new StudentDaoImpl();
/*遍历数据拿到总条数(遍历所有数据有多少条数据就知道总共多少)*/
int total = studentDao.findAllStudent().size();
// 将分装的数据，装到map集合中，发送到当前端
List<Students> list = studentDao.findPageStudent(page, size);
// 将总条数和分页的数据传入到前端
map.put("total", total);
map.put("list",list);
// 创建GSon格式化时间日期
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
/*将响应的数据以字符串形式发送到前端*/
response.setContentType("text/html;charset=utf-8");
System.out.println(gson.toJson(map));
response.getWriter().print(gson.toJson(map));
}
}
前端分页组件:将总条数total传入
<!--分页组件
:total:表示总记录数 ：page-size:表示每页的记录数，默认10，layout: 布局分页组件显示项
total:显示总记录数 prev:显示显示上一页 pager:显示页码 next:显示下一页 size:设置每页的记录数
jumper:跳页
@current-change="currentPage ":当前页发送改变调用currentPage()(自定义方法)，并且会将改变的页数传递给currentPage
@size-change="changeSize":每页显示的记录数改变调用changeSize（），会将改变的size传递给长changeSize
-->
<el-pagination :total="total" background-layout="total,prev,pager,next,sizes,jumper" @current-change="currentPage"
@size-change="changeSize"
></el-pagination>
/*批量删除学生,通过全选和选中某行的事件，完成单选删除和批量删除，获取选中的数据,赋值给selectRows[]*/
selectAllStudent(all) {
this.selectRows = all;
},
selectStudent(row) {
this.selectRows = row;
}
,
/*删除学生,批量删除*/
deleteStudents() {
alert(this.selectRows)
// 判断是否已经选中元素,选中则发送请求
if (this.selectRows.length > 0) {
/*提示一下是否需要删除*/
this.$confirm("确定要删除吗？").then(() => {
const ids = [];
//循环遍历这个数组"selectRows[]"存入的对象,获取到他的id值，将id传入到服务器
for (let i = 0; i < this.selectRows.length; i++) {
ids[i] = this.selectRows[i].id;
}
alert(ids)
/*this.selectRows装的对象，而后端接收的是一个id值，所以不行*/
axios.post("DelServlet", "ids=" + ids).then(resp => {
if (resp.data == "success") {
this.$notify({
title: '删除学生',
message: '删除成功',
type: 'success',
position: 'bottom-right'
});
/*删除完刷新页面*/
this.getStudents();
}
});
});
} else {
this.$alert("请选择要删除的学生");
}通过插槽的 #default="scope"获取单行选中的对象,通过scope.row.id获取id值
<el-table-column label="操作">
<!--通过插槽中的scope获取某个对象-->
<template #default="scope">
<!--size设置按钮大小-->
<el-button type="success" size="small" @click="updateStu(scope)">编辑</el-button>
<el-button type="danger" size="small" @click="delStudent(scope)">删除</el-button>
</template>
</el-table-column>
//单选删除（编辑，操作）
delStudent(scope) {
//通过scope获取到这行中id的值
var id = scope.row.id;
alert(id)
this.$confirm("确定删除学生吗？").then(() => {
axios.post("DelServlet", "ids=" + id).then(resp => {
if (resp.data == "success") {
this.$notify({
title: '删除学生',
message: '删除成功',
type: 'success',
position: 'bottom-right'
});
/*删除完刷新页面*/
this.getStudents();
}
});
})5.修改的回显数据也通过插槽进行获取
//更新操作(回显数据)
updateStu(scope) {
this.update_flag = true;
this.student = scope.row;
},@Override
public List<Students> findLinkStudent(Students students) {
String sql ="select * from t_student where sname like '%"+students.getSname()+"%'";
return DBUtil.executeDQL(Students.class,sql);
}
@WebServlet("/LinkServlet")
public class LinkServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String sname = request.getParameter("sname");
System.out.println(sname);
StudentDao studentDao = new StudentDaoImpl();
Students students = new Students();
students.setSname(sname);
List<Students> list = studentDao.findLinkStudent(students);
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
// 获取查询出来的总页数
int total = studentDao.findLinkStudent(students).size();
/*将数据封装到map集合中，将总页数和查询出来的数据发送到前端页面*/
Map<String,Object> map = new HashMap<>();
map.put("total",total);
map.put("listData",list);
response.getWriter().print(gson.toJson(map));
}
}