本篇博客，主要是利用mybatis插件pagehelper实现分页，虽然现在有很多关于分页的博客，但是，很多都是同步请求的。由于我自己的项目，全部使用ajax请求，所以分页的信息无法写在jsp页面上，所以也只能通过ajax请求来实现分页。下面以成绩管理模块为例，说明怎样分页。
一、在pom.xml中添加pagehelper的坐标
<!-- mybatis分页插件pageHelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.4</version>
</dependency>二、在mybatis的配置文件中，作如下配置
<plugins>
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库-->
<property name="dialect" value="mysql"/>
<!--reasonable：分页合理化参数，默认值为false。
当该参数设置为 true 时，pageNum<=0 时会查询第一页，
pageNum>pages（超过总数时），会查询最后一页。
默认false 时，直接根据参数进行查询。-->
<property name="reasonable" value="true"/>
</plugin>
</plugins>三、成绩模块的pojo、mapper等文件
1.成绩表，见https://blog.csdn.net/qiuxinfa123/article/details/97566205
2. Grade.java
package com.qxf.pojo;
import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
/**
* 成绩表
* @author Administrator
*
*/
public class Grade {
private String id;
private String studentId;
private String courseId;
private String teacherId;
@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
private Date examTime;
private Integer examType;
private double score;
public Grade() {
}
public Grade(String id, String studentId, String courseId, String teacherId, Date examTime, Integer examType,
double score) {
this.id = id;
this.studentId = studentId;
this.courseId = courseId;
this.teacherId = teacherId;
this.examTime = examTime;
this.examType = examType;
this.score = score;
}
public String getTeacherId() {
return teacherId;
}
public void setTeacherId(String teacherId) {
this.teacherId = teacherId;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getStudentId() {
return studentId;
}
public void setStudentId(String studentId) {
this.studentId = studentId;
}
public String getCourseId() {
return courseId;
}
public void setCourseId(String courseId) {
this.courseId = courseId;
}
public Date getExamTime() {
return examTime;
}
public void setExamTime(Date examTime) {
this.examTime = examTime;
}
public Integer getExamType() {
return examType;
}
public void setExamType(Integer examType) {
this.examType = examType;
}
public double getScore() {
return score;
}
public void setScore(double score) {
this.score = score;
}
@Override
public String toString() {
return "Grade [id=" + id + ", studentId=" + studentId + ", courseId=" + courseId + ", teacherId=" + teacherId
+ ", examTime=" + examTime + ", examType=" + examType + ", score=" + score + "]";
}
}
3.GradeMapper.java
package com.qxf.mapper;
import java.util.List;
import com.qxf.pojo.CourseTeacher;
import com.qxf.pojo.Grade;
import com.qxf.pojo.Student;
import com.qxf.pojo.StudentCourse;
public interface GradeMapper {
/**
* 查找全部成绩
* @return
*/
public List<Grade> findAllGrade(Grade grade);
/**
* 根据学号查找成绩
* @param sid
* @return
*/
public Grade findGradeById(String id);
/**
* 根据学号删除成绩
* @param sid
* @return
*/
public Integer deleteGradeById(String id);
/**
* 修改成绩信息
* @param grade
* @return
*/
public Integer updateGrade(Grade grade);
/**
* 新增成绩
* @param grade
* @return
*/
public Integer addGrade(Grade grade);
/**
* 查找学生列表
* @return
*/
public List<Student> getStudentList();
/**
* 查找学生-课程列表
* @return
*/
public List<StudentCourse> getStudentCourseList(StudentCourse sc);
/**
* 查找课程-老师列表
* @return
*/
public List<CourseTeacher> getCourseTeacherList(CourseTeacher ct);
/**
* 查找当前数据是否存在中间表StudentCourse
* @param sc
* @return
*/
public StudentCourse findStudentCourseById(StudentCourse sc);
/**
* 将当前数据插入到中间表StudentCourse
* @param sc
* @return
*/
public Integer addStudentCourse(StudentCourse sc);
/**
* 查找当前数据是否存在中间表CourseTeacher
* @param ct
* @return
*/
public CourseTeacher findCourseTeacherById(CourseTeacher ct);
/**
* 将当前数据插入到中间表CourseTeacher
* @param ct
* @return
*/
public Integer addCourseTeacher(CourseTeacher ct);
}
4.GradeMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qxf.mapper.GradeMapper">
<!-- 查询所有成绩信息 -->
<select id="findAllGrade" parameterType="com.qxf.pojo.Grade" resultType="com.qxf.pojo.Grade">
select g.id,
(select c.name from student c where c.id=g.student_id) studentId,
(select c.name from course c where c.id=g.course_id) courseId,
(select c.name from teacher c where c.id=g.teacher_id) teacherId,
DATE_FORMAT(g.exam_time,'%Y-%m-%d') examTime,
g.exam_type,
g.score
from grade g
<where>
<if test="id!=null and id!=''">
id= #{id}
</if>
<if test="examTime!=null and examTime!=''">
and g.exam_time= #{examTime}
</if>
<if test="examType!=null and examType!=''">
and exam_type= #{examType}
</if>
<if test="score!=null and score!=''">
and score=#{score}
</if>
<if test="studentId!=null and studentId!='' and studentId!='-1'">
and student_id=#{studentId}
</if>
<if test="courseId!=null and courseId!='' and courseId!='-1'">
and course_id=#{courseId}
</if>
<if test="teacherId!=null and teacherId!='' and teacherId!='-1'">
and teacher_id=#{teacherId}
</if>
</where>
</select>
<!-- 根据id查询成绩信息 -->
<select id="findGradeById" resultType="com.qxf.pojo.Grade" parameterType="string">
select * from grade where id=#{id}
</select>
<!-- 根据学号删除成绩 -->
<delete id="deleteGradeById" parameterType="string">
delete from grade where id=#{id}
</delete>
<!-- 修改信息 -->
<update id="updateGrade" parameterType="com.qxf.pojo.Grade">
update grade
<set>
<if test="examTime!=null and examTime!=''">
exam_time= #{examTime}
</if>
<if test="examType!=null and examType!=''">
,exam_type= #{examType}
</if>
<if test="score!=null and score!=''">
,score=#{score}
</if>
<if test="studentId!=null and studentId!='' and studentId!='-1'">
,student_id=#{studentId}
</if>
<if test="courseId!=null and courseId!='' and courseId!='-1'">
,course_id=#{courseId}
</if>
<if test="teacherId!=null and teacherId!='' and teacherId!='-1'">
,teacher_id=#{teacherId}
</if>
</set>
where id=#{id}
</update>
<!-- 添加成绩 -->
<insert id="addGrade" parameterType="com.qxf.pojo.Grade">
insert into grade(id,exam_time,exam_type,score,student_id,course_id,teacher_id)
values(#{id},#{examTime},#{examType},#{score},#{studentId},#{courseId},#{teacherId})
</insert>
<!-- 查找学生列表 -->
<select id="getStudentList" resultType="com.qxf.pojo.Student">
select id,name from student
</select>
<!-- 查找学生-课程列表 -->
<select id="getStudentCourseList" parameterType="com.qxf.pojo.StudentCourse" resultType="com.qxf.pojo.Course">
select c.id,c.name from course c,student_course sc where c.id=sc.course_id
<if test="studentId!=null and studentId!='' and studentId!='-1'">
and sc.student_id=#{studentId}
</if>
</select>
<!-- 查找课程-老师列表 -->
<select id="getCourseTeacherList" parameterType="com.qxf.pojo.CourseTeacher" resultType="com.qxf.pojo.Teacher">
select t.id,t.name from teacher t,course_teacher ct where t.id=ct.teacher_id
<if test="courseId!=null and courseId!='' and courseId!='-1'">
and ct.course_id=#{courseId}
</if>
</select>
<!-- 查找当前数据是否存在中间表StudentCourse -->
<select id="findStudentCourseById" parameterType="com.qxf.pojo.StudentCourse" resultType="com.qxf.pojo.StudentCourse">
select * from student_course
<where>
<if test="studentId!=null and studentId!=''">
and student_id=#{studentId}
</if>
<if test="courseId!=null and courseId!=''">
and course_id=#{courseId}
</if>
</where>
</select>
<!-- 将当前数据插入到中间表StudentCourse -->
<insert id="addStudentCourse" parameterType="com.qxf.pojo.StudentCourse">
insert into student_course(id,student_id,course_id) values (#{id},#{studentId},#{courseId});
</insert>
<!-- 查找当前数据是否存在中间表CourseTeacher -->
<select id="findCourseTeacherById" parameterType="com.qxf.pojo.CourseTeacher" resultType="com.qxf.pojo.CourseTeacher">
select * from course_teacher
<where>
<if test="teacherId!=null and teacherId!=''">
and teacher_id=#{teacherId}
</if>
<if test="courseId!=null and courseId!=''">
and course_id=#{courseId}
</if>
</where>
</select>
<!-- 将当前数据插入到中间表CourseTeacher -->
<insert id="addCourseTeacher" parameterType="com.qxf.pojo.CourseTeacher">
insert into course_teacher(id,course_id,teacher_id) values (#{id},#{courseId},#{teacherId});
</insert>
</mapper>5.GradeService.java
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qxf.mapper.GradeMapper">
<!-- 查询所有成绩信息 -->
<select id="findAllGrade" parameterType="com.qxf.pojo.Grade" resultType="com.qxf.pojo.Grade">
select g.id,
(select c.name from student c where c.id=g.student_id) studentId,
(select c.name from course c where c.id=g.course_id) courseId,
(select c.name from teacher c where c.id=g.teacher_id) teacherId,
DATE_FORMAT(g.exam_time,'%Y-%m-%d') examTime,
g.exam_type,
g.score
from grade g
<where>
<if test="id!=null and id!=''">
id= #{id}
</if>
<if test="examTime!=null and examTime!=''">
and g.exam_time= #{examTime}
</if>
<if test="examType!=null and examType!=''">
and exam_type= #{examType}
</if>
<if test="score!=null and score!=''">
and score=#{score}
</if>
<if test="studentId!=null and studentId!='' and studentId!='-1'">
and student_id=#{studentId}
</if>
<if test="courseId!=null and courseId!='' and courseId!='-1'">
and course_id=#{courseId}
</if>
<if test="teacherId!=null and teacherId!='' and teacherId!='-1'">
and teacher_id=#{teacherId}
</if>
</where>
</select>
<!-- 根据id查询成绩信息 -->
<select id="findGradeById" resultType="com.qxf.pojo.Grade" parameterType="string">
select * from grade where id=#{id}
</select>
<!-- 根据学号删除成绩 -->
<delete id="deleteGradeById" parameterType="string">
delete from grade where id=#{id}
</delete>
<!-- 修改信息 -->
<update id="updateGrade" parameterType="com.qxf.pojo.Grade">
update grade
<set>
<if test="examTime!=null and examTime!=''">
exam_time= #{examTime}
</if>
<if test="examType!=null and examType!=''">
,exam_type= #{examType}
</if>
<if test="score!=null and score!=''">
,score=#{score}
</if>
<if test="studentId!=null and studentId!='' and studentId!='-1'">
,student_id=#{studentId}
</if>
<if test="courseId!=null and courseId!='' and courseId!='-1'">
,course_id=#{courseId}
</if>
<if test="teacherId!=null and teacherId!='' and teacherId!='-1'">
,teacher_id=#{teacherId}
</if>
</set>
where id=#{id}
</update>
<!-- 添加成绩 -->
<insert id="addGrade" parameterType="com.qxf.pojo.Grade">
insert into grade(id,exam_time,exam_type,score,student_id,course_id,teacher_id)
values(#{id},#{examTime},#{examType},#{score},#{studentId},#{courseId},#{teacherId})
</insert>
<!-- 查找学生列表 -->
<select id="getStudentList" resultType="com.qxf.pojo.Student">
select id,name from student
</select>
<!-- 查找学生-课程列表 -->
<select id="getStudentCourseList" parameterType="com.qxf.pojo.StudentCourse" resultType="com.qxf.pojo.Course">
select c.id,c.name from course c,student_course sc where c.id=sc.course_id
<if test="studentId!=null and studentId!='' and studentId!='-1'">
and sc.student_id=#{studentId}
</if>
</select>
<!-- 查找课程-老师列表 -->
<select id="getCourseTeacherList" parameterType="com.qxf.pojo.CourseTeacher" resultType="com.qxf.pojo.Teacher">
select t.id,t.name from teacher t,course_teacher ct where t.id=ct.teacher_id
<if test="courseId!=null and courseId!='' and courseId!='-1'">
and ct.course_id=#{courseId}
</if>
</select>
<!-- 查找当前数据是否存在中间表StudentCourse -->
<select id="findStudentCourseById" parameterType="com.qxf.pojo.StudentCourse" resultType="com.qxf.pojo.StudentCourse">
select * from student_course
<where>
<if test="studentId!=null and studentId!=''">
and student_id=#{studentId}
</if>
<if test="courseId!=null and courseId!=''">
and course_id=#{courseId}
</if>
</where>
</select>
<!-- 将当前数据插入到中间表StudentCourse -->
<insert id="addStudentCourse" parameterType="com.qxf.pojo.StudentCourse">
insert into student_course(id,student_id,course_id) values (#{id},#{studentId},#{courseId});
</insert>
<!-- 查找当前数据是否存在中间表CourseTeacher -->
<select id="findCourseTeacherById" parameterType="com.qxf.pojo.CourseTeacher" resultType="com.qxf.pojo.CourseTeacher">
select * from course_teacher
<where>
<if test="teacherId!=null and teacherId!=''">
and teacher_id=#{teacherId}
</if>
<if test="courseId!=null and courseId!=''">
and course_id=#{courseId}
</if>
</where>
</select>
<!-- 将当前数据插入到中间表CourseTeacher -->
<insert id="addCourseTeacher" parameterType="com.qxf.pojo.CourseTeacher">
insert into course_teacher(id,course_id,teacher_id) values (#{id},#{courseId},#{teacherId});
</insert>
</mapper>6.GradeServiceImpl.java
package com.qxf.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.qxf.mapper.GradeMapper;
import com.qxf.pojo.CourseTeacher;
import com.qxf.pojo.Grade;
import com.qxf.pojo.Student;
import com.qxf.pojo.StudentCourse;
import com.qxf.service.GradeService;
@Service
public class GradeServiceImpl implements GradeService{
@Autowired
private GradeMapper gradeMapper;
public List<Grade> findAllGrade(Grade grade) {
// TODO Auto-generated method stub
return gradeMapper.findAllGrade(grade);
}
public Grade findGradeById(String id) {
// TODO Auto-generated method stub
return gradeMapper.findGradeById(id);
}
public Integer deleteGradeById(String id) {
// TODO Auto-generated method stub
return gradeMapper.deleteGradeById(id);
}
public Integer updateGrade(Grade grade) {
// TODO Auto-generated method stub
return gradeMapper.updateGrade(grade);
}
public Integer addGrade(Grade grade) {
// TODO Auto-generated method stub
return gradeMapper.addGrade(grade);
}
public List<Student> getStudentList() {
// TODO Auto-generated method stub
return gradeMapper.getStudentList();
}
public List<StudentCourse> getStudentCourseList(StudentCourse sc) {
// TODO Auto-generated method stub
return gradeMapper.getStudentCourseList(sc);
}
public List<CourseTeacher> getCourseTeacherList(CourseTeacher ct) {
// TODO Auto-generated method stub
return gradeMapper.getCourseTeacherList(ct);
}
public StudentCourse findStudentCourseById(StudentCourse sc) {
// TODO Auto-generated method stub
return gradeMapper.findStudentCourseById(sc);
}
public Integer addStudentCourse(StudentCourse sc) {
// TODO Auto-generated method stub
return gradeMapper.addStudentCourse(sc);
}
public CourseTeacher findCourseTeacherById(CourseTeacher ct) {
// TODO Auto-generated method stub
return gradeMapper.findCourseTeacherById(ct);
}
public Integer addCourseTeacher(CourseTeacher ct) {
// TODO Auto-generated method stub
return gradeMapper.addCourseTeacher(ct);
}
}
7.GradeController.java
package com.qxf.controller;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.UUID;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.qxf.pojo.CourseTeacher;
import com.qxf.pojo.Student;
import com.qxf.pojo.StudentCourse;
import com.qxf.pojo.Grade;
import com.qxf.service.GradeService;
@Controller
public class GradeController {
@Autowired
private GradeService gradeService;
/**
* 格式化前台传过来的日期类型
* @param binder
*/
@InitBinder
public void initBinder(ServletRequestDataBinder binder){
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, true));
}
/**
* 查找学生列表
* @param model
* @return
*/
@ResponseBody
@RequestMapping("/findStudentList")
public String findStudentList() {
//学生下拉列表
List<Student> studentList = gradeService.getStudentList();
String jsonString = JSON.toJSONString(studentList);
return jsonString;
}
/**
* 查找学生-课程列表
* @param model
* @return
*/
@ResponseBody
@RequestMapping("/getStudentCourseList")
public String getStudentCourseList(StudentCourse sc) {
//学生-课程下拉列表
List<StudentCourse> majorList = gradeService.getStudentCourseList(sc);
String jsonString = JSON.toJSONString(majorList);
return jsonString;
}
/**
* 查找课程-老师列表
* @param model
* @return
*/
@ResponseBody
@RequestMapping("/getCourseTeacherList")
public String getCourseTeacherList(CourseTeacher ct) {
//课程-老师下拉列表
List<CourseTeacher> clazzList = gradeService.getCourseTeacherList(ct);
String jsonString = JSON.toJSONString(clazzList);
return jsonString;
}
/**
* 查找全部成绩
* @param model
* @return
*/
@ResponseBody
@RequestMapping("/findAllGrade")
public String findAllGrade(@RequestParam(required = false,defaultValue = "1",value = "pn")Integer pn,Grade grade) {
System.out.println("查找条件--->"+grade);
PageHelper.startPage(pn, 5);
//startPage后紧跟的这个查询就是分页查询
List<Grade> list = gradeService.findAllGrade(grade);
//使用PageInfo包装查询结果，只需要将pageInfo交给页面就可以
PageInfo<Grade> pageInfo = new PageInfo<Grade>(list,5);
String jsonString = JSON.toJSONString(pageInfo);
return jsonString;
}
/**
* 根据id查询成绩
* @param sid
* @return
*/
//ajax查询数据
@ResponseBody
@RequestMapping("/findGradeById")
public Grade findGradeById(@RequestParam("id") String id) {
System.out.println("查找学号--->"+id);
return gradeService.findGradeById(id);
}
@ResponseBody
@RequestMapping("/deleteGradeById")
public String deleteGradeById(@RequestParam("id") String id) {
Integer flag = gradeService.deleteGradeById(id);
if(flag>0) {
return JSON.toJSONString("删除成功！");
}else {
return JSON.toJSONString("删除失败！");
}
}
@ResponseBody
@RequestMapping("/updateGrade")
public String updateGrade(Grade grade) {
Integer flag = gradeService.updateGrade(grade);
String msg = "";
if(flag>0) {
msg = "修改成功";
}else {
msg = "修改失败";
}
return JSON.toJSONString(msg);
}
@ResponseBody
@RequestMapping("/addGrade")
public String addGrade(Grade grade) {
String uuid = UUID.randomUUID().toString().replace("-", "");
grade.setId(uuid);
Integer flag = gradeService.addGrade(grade);
String msg = "";
if(flag>0) {
msg +="1";
}else {
msg += "0";
}
String studentId = grade.getStudentId();
String courseId = grade.getCourseId();
String teacherId = grade.getTeacherId();
uuid = UUID.randomUUID().toString().replace("-", "");
StudentCourse sc = new StudentCourse(uuid, studentId, courseId);
uuid = UUID.randomUUID().toString().replace("-", "");
CourseTeacher ct = new CourseTeacher(uuid, courseId, teacherId);
StudentCourse scFlag = gradeService.findStudentCourseById(sc);
//如果当前数据不存在中间表StudentCourse，则插入
if(scFlag==null) {
msg+=","+gradeService.addStudentCourse(sc);
}
CourseTeacher ctFlag = gradeService.findCourseTeacherById(ct);
if(ctFlag==null) {
msg+=","+gradeService.addCourseTeacher(ct);
}
return msg;
}
}
8.showGrade.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<title>成绩管理</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/grade/js/showGrade.js"></script>
<style type="text/css">
label{
margin-top: 100px;
margin-left:500px;
}
.center{
text-align:center;
}
/* table{
border-collapse:collapse;
border-spacing:0;
margin:0;
padding:0;
border:none;
align-content: center;
} */
td{
/* border-collapse:collapse;
border-spacing:0;
margin:0;
padding:0; */
text-align:center;
}
a{
text-decoration:none;
display: inline-block;
text-align: center;
}
button{
margin: 0;
padding: 0;
font-size: 100%;
}
.buttonClass{
background-color: white!important;
color: blue;
border: 0px;
margin-right: -1px;
margin-bottom: -1px;
}
.form-right{
text-align:center;
}
.search{
margin-top:30px;
}
</style>
</head>
<body>
<br>
<!-- 查询条件 -->
<div class="search">
<label>查找条件：</label><br/>
<form action="${pageContext.request.contextPath }/findAllGrade" method="get" id="searchForm" class="center">
<div>
考试号：<input type="text" name="id" id="id" value=""/>
</div>
<div>
考试时间：<input type="date" name="examTime" id="examTime" value=""/>
</div>
<div>
考试类型：<input type="text" name="examType" id="examType" value=""/>
</div>
<div>
学生姓名： <select id="selectStudent" onchange="studentChange()">
</select>
</div>
<div>
考试课程：<select id="selectCourse" onchange="courseChange()">
</select>
</div>
<div>
任课老师：<select id="selectTeacher">
</select>
</div>
<div>
成绩：<input type="text" name="score" id="score" value=""/>
</div>
<br>
<input type="button" onclick="searchGrade()" value="查找"/>
<input type="button" onclick="clearForm()" value="重置"/>
</form>
</div>
<br/><br/>
<!-- 结果列表 -->
<label>结果列表：</label><br/><br/><br/>
<table width="50%" border="1" align="center" cellspacing="0" cellpadding="0" id="show">
<thead>
<tr align="center">
<th>序号</th>
<th>考试号</th>
<th>考试时间</th>
<th>考试类型</th>
<th>学生姓名</th>
<th>考试课程</th>
<th>任课老师</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 分页信息 -->
<div id="fenye" class="center">
</div>
</body>
</html>
9.showGrade.js
//页面加载时执行，查找全部成绩列表
$(function () {
//学生下拉列表
$.ajax({
type: "post",
url: "/stuInfoManagerSys/findStudentList",
dataType: "json",
success: function (instituteList) {
for(var i=0;i<instituteList.length;i++){
var data = instituteList[i];
var option = "<option value="+data.id+">"+data.name+"</option>";
$("#selectStudent").append(option);
}
var option = "<option value=-1>请选择</option>";
$("#selectStudent").append(option);
$("#selectStudent option[value='-1']").attr("selected", true);
},
//null值不会被success回调函数捕获，因此可以通过error来实现该功能
error: function () {
alert("学院列表获取失败！");
}
})
//初始化学生-课程下拉选择
var option = "<option value=-1>请选择</option>";
$("#selectCourse").append(option);
$("#selectCourse option[value='-1']").attr("selected", true);
//初始化课程-老师下拉选择
option = "<option value=-1>请选择</option>";
$("#selectTeacher").append(option);
$("#selectTeacher option[value='-1']").attr("selected", true);
//成绩列表
$.ajax({
type: "post",
url: "/stuInfoManagerSys/findAllGrade",
dataType: "json",
success: function (pageInfo) {
var gradeList = pageInfo.list;
for(var i=0;i<gradeList.length;i++){
var data = gradeList[i];
var tmp = new Date(data.examTime);
var examTime = myformatter(tmp);
var operation="<a href=\"/stuInfoManagerSys/grade/jsp/addGrade.jsp\">添加</a>"
+ " <button onclick=\"deleteGrade(\'"+ data.id +"\')\" class='buttonClass'>删除</button>"
+ " <a href=\"/stuInfoManagerSys/grade/jsp/editGrade.jsp?id="+ data.id +"\">修改</a>";
var tr = "";
tr +=
"<td>"+(i+1)+"</td><td>" + data.id + "</td><td>" + examTime + "</td><td>" + data.examType
+ "</td><td>" + data.studentId + "</td><td>" + data.courseId + "</td><td>" + data.teacherId + "</td><td>" + data.score + "</td><td>"
+ operation + "</td>";
$("tbody").append('<tr>'+tr+'</tr>');
}
//设置分页信息
var fenye="<button onclick=\"toFenye(\'"+ 1 +"\')\" class='buttonClass'>首页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pageNum-1) +"\')\" class='buttonClass'>上一页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pageNum+1) +"\')\" class='buttonClass'>下一页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pages) +"\')\" class='buttonClass'>尾页</button>"
+ " 当前第"+ (pageInfo.pageNum) +"页 总共"+ (pageInfo.pages) +"页 总共"+(pageInfo.total) +"条记录";
$("#fenye").append(fenye);
// + " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pageNum-1) +"\">上一页</a>"
// + " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pageNum+1) +"\">下一页</a>"
},
//null值不会被success回调函数捕获，因此可以通过error来实现该功能
error: function () {
alert("初始化：查找失败！");
}
})
});
//根据id删除成绩
function deleteGrade(id){
debugger;
$.ajax({
type: "post",
url: "/stuInfoManagerSys/deleteGradeById",
data: {"id":id},
dataType: "json",
success: function(data){
alert(data);
window.location.reload(); //刷新当前页面.
//parent.location.reload(); //刷新父亲对象（用于框架）
},
//null值不会被success回调函数捕获，因此可以通过error来实现该功能
error: function () {
alert("删除失败");
}
})
}
//根据条件查找成绩
function searchGrade(){
var id = $("#id").val();
var examTime = $("#examTime").val();
var examType = $("#examType").val();
var score = $("#score").val();
if(score==null || score==''){
score=0;
}
var studentId = $('#selectStudent option:selected').val();
var courseId = $('#selectCourse option:selected').val();
var teacherId = $('#selectTeacher option:selected').val();
debugger;
$.ajax({
type: "post",
url: "/stuInfoManagerSys/findAllGrade",
data: {"id":id,"examTime":examTime,"examType":examType,"score":score,"studentId":studentId,"courseId":courseId,"teacherId":teacherId},
dataType: "json",
success: function (pageInfo) {
$("tbody").html(""); //清除原来的数据
var gradeList = pageInfo.list;
for(var i=0;i<gradeList.length;i++){
var data = gradeList[i];
var tmp = new Date(data.examTime);
var examTime = myformatter(tmp);
var operation="<a href=\"/stuInfoManagerSys/grade/jsp/addGrade.jsp\">添加</a>"
+ " <button onclick=\"deleteGrade("+ data.id +")\" class='buttonClass'>删除</button>"
+ " <a href=\"/stuInfoManagerSys/grade/jsp/editGrade.jsp?id="+ data.id +"\">修改</a>";
var tr = "";
tr +=
"<td>"+(i+1)+"</td><td>" + data.id + "</td><td>" + examTime + "</td><td>" + data.examType
+ "</td><td>" + data.studentId + "</td><td>" + data.courseId + "</td><td>" + data.teacherId + "</td><td>" + data.score + "</td><td>"
+ operation + "</td>";
$("tbody").append('<tr>'+tr+'</tr>');
}
//设置分页信息
var fenye="<a href=\"/stuInfoManagerSys/findAllGrade?pn=1\">首页</a>"
+ " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pageNum-1) +"\">上一页</a>"
+ " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pageNum+1) +"\">下一页</a>"
+ " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pages) +"\">尾页</a>"
+ " 当前第"+ (pageInfo.pageNum) +"页 总共"+ (pageInfo.total) +"条记录";
$("#fenye").append(fenye);
},
//null值不会被success回调函数捕获，因此可以通过error来实现该功能
error: function () {
alert("查找失败");
}
})
}
//重置
function clearForm(){
//清空查询条件
$("#id").val("");
$("#examTime").val("");
$("#examType").val("");
$("#score").val("");
$("#selectStudent").val("-1");
$("#selectCourse").val("-1");
$("#selectTeacher").val("-1");
//无条件查询
searchGrade();
}
//格式化时间yyyy-mm-dd
function myformatter(date){
var strDate = date.getFullYear()+"-";
strDate += date.getMonth()+1+"-";
strDate += date.getDate();
return strDate ;
}
//当学生改变时触发
function studentChange(){
//清空下拉列表的内容
$("#selectCourse").empty();
$("#selectTeacher").empty();
//获取学生的选中的id
var studentId = $('#selectStudent option:selected').val();
//异步请求获取该学院下的专业列表
//专业下拉列表
$.ajax({
type: "post",
url: "/stuInfoManagerSys/getStudentCourseList",
dataType: "json",
data:{"studentId":studentId},
success: function (instituteList) {
for(var i=0;i<instituteList.length;i++){
var data = instituteList[i];
var option = "<option value="+data.id+">"+data.name+"</option>";
$("#selectCourse").append(option);
}
var option = "<option value=-1>请选择</option>";
$("#selectCourse").append(option);
$("#selectCourse option[value='-1']").attr("selected", true);
},
//null值不会被success回调函数捕获，因此可以通过error来实现该功能
error: function () {
alert("课程列表获取失败！");
}
})
}
//当课程改变时触发
function courseChange(){
//清空老师下拉列表的内容
$("#selectTeacher").empty();
//获取专业下的选中的id
var courseId = $('#selectCourse option:selected').val();
//异步请求获取该学院下的专业列表
$.ajax({
type: "post",
url: "/stuInfoManagerSys/getCourseTeacherList",
dataType: "json",
data:{"courseId":courseId},
success: function (instituteList) {
for(var i=0;i<instituteList.length;i++){
var data = instituteList[i];
var option = "<option value="+data.id+">"+data.name+"</option>";
$("#selectTeacher").append(option);
}
var option = "<option value=-1>请选择</option>";
$("#selectTeacher").append(option);
$("#selectTeacher option[value='-1']").attr("selected", true);
},
//null值不会被success回调函数捕获，因此可以通过error来实现该功能
error: function () {
alert("老师列表获取失败！");
}
})
}
//分页触发
function toFenye(pn){
alert("pn=="+pn);
//成绩列表
$.ajax({
type: "post",
data:{"pn":pn},
url: "/stuInfoManagerSys/findAllGrade",
dataType: "json",
success: function (pageInfo) {
$("tbody").html(""); //清除原来的数据
$("#fenye").html(""); //清除原来的数据
var gradeList = pageInfo.list;
for(var i=0;i<gradeList.length;i++){
var data = gradeList[i];
var tmp = new Date(data.examTime);
var examTime = myformatter(tmp);
var operation="<a href=\"/stuInfoManagerSys/grade/jsp/addGrade.jsp\">添加</a>"
+ " <button onclick=\"deleteGrade(\'"+ data.id +"\')\" class='buttonClass'>删除</button>"
+ " <a href=\"/stuInfoManagerSys/grade/jsp/editGrade.jsp?id="+ data.id +"\">修改</a>";
var tr = "";
tr +=
"<td>"+(i+1)+"</td><td>" + data.id + "</td><td>" + examTime + "</td><td>" + data.examType
+ "</td><td>" + data.studentId + "</td><td>" + data.courseId + "</td><td>" + data.teacherId + "</td><td>" + data.score + "</td><td>"
+ operation + "</td>";
$("tbody").append('<tr>'+tr+'</tr>');
}
//设置分页信息
var fenye="<button onclick=\"toFenye(\'"+ 1 +"\')\" class='buttonClass'>首页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pageNum-1) +"\')\" class='buttonClass'>上一页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pageNum+1) +"\')\" class='buttonClass'>下一页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pages) +"\')\" class='buttonClass'>尾页</button>"
+ " 当前第"+ (pageInfo.pageNum) +"页 总共"+ (pageInfo.pages) +"页 总共"+(pageInfo.total) +"条记录";
$("#fenye").append(fenye);
// + " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pageNum-1) +"\">上一页</a>"
// + " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pageNum+1) +"\">下一页</a>"
},
//null值不会被success回调函数捕获，因此可以通过error来实现该功能
error: function () {
alert("初始化：查找失败！");
}
})
}
10.关键点
在查询数据之前，设置分页信息
/**
* 查找全部成绩
* @param model
* @return
*/
@ResponseBody
@RequestMapping("/findAllGrade")
public String findAllGrade(@RequestParam(required = false,defaultValue = "1",value = "pn")Integer pn,Grade grade) {
System.out.println("查找条件--->"+grade);
PageHelper.startPage(pn, 5);
//startPage后紧跟的这个查询就是分页查询
List<Grade> list = gradeService.findAllGrade(grade);
//使用PageInfo包装查询结果，只需要将pageInfo交给页面就可以
PageInfo<Grade> pageInfo = new PageInfo<Grade>(list,5);
String jsonString = JSON.toJSONString(pageInfo);
return jsonString;
}在js文件进行拼接
//分页触发
function toFenye(pn){
alert("pn=="+pn);
//成绩列表
$.ajax({
type: "post",
data:{"pn":pn},
url: "/stuInfoManagerSys/findAllGrade",
dataType: "json",
success: function (pageInfo) {
$("tbody").html(""); //清除原来的数据
$("#fenye").html(""); //清除原来的数据
var gradeList = pageInfo.list;
for(var i=0;i<gradeList.length;i++){
var data = gradeList[i];
var tmp = new Date(data.examTime);
var examTime = myformatter(tmp);
var operation="<a href=\"/stuInfoManagerSys/grade/jsp/addGrade.jsp\">添加</a>"
+ " <button onclick=\"deleteGrade(\'"+ data.id +"\')\" class='buttonClass'>删除</button>"
+ " <a href=\"/stuInfoManagerSys/grade/jsp/editGrade.jsp?id="+ data.id +"\">修改</a>";
var tr = "";
tr +=
"<td>"+(i+1)+"</td><td>" + data.id + "</td><td>" + examTime + "</td><td>" + data.examType
+ "</td><td>" + data.studentId + "</td><td>" + data.courseId + "</td><td>" + data.teacherId + "</td><td>" + data.score + "</td><td>"
+ operation + "</td>";
$("tbody").append('<tr>'+tr+'</tr>');
}
//设置分页信息
var fenye="<button onclick=\"toFenye(\'"+ 1 +"\')\" class='buttonClass'>首页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pageNum-1) +"\')\" class='buttonClass'>上一页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pageNum+1) +"\')\" class='buttonClass'>下一页</button>"
+ " <button onclick=\"toFenye(\'"+ (pageInfo.pages) +"\')\" class='buttonClass'>尾页</button>"
+ " 当前第"+ (pageInfo.pageNum) +"页 总共"+ (pageInfo.pages) +"页 总共"+(pageInfo.total) +"条记录";
$("#fenye").append(fenye);
// + " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pageNum-1) +"\">上一页</a>"
// + " <a href=\"/stuInfoManagerSys/findAllGrade?pn="+ (pageInfo.pageNum+1) +"\">下一页</a>"
},
//null值不会被success回调函数捕获，因此可以通过error来实现该功能
error: function () {
alert("初始化：查找失败！");
}
})
}
3883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
