Mybatis+springMVC+分页查询+前后端代码

前言

我们在公司中经常会用到分页查询，最近，我在做一个公司的任务的时候，调用外部系统时需要将结果封装成分页的数据，之前我们都是直接调用我们公司统一封装的分页查询，所以很长事件我都没有认真的去了解分页查询。所以特意我自己整合了springmvc和mybatis，还有自己学习的前端知识，做了一个简易版的分页查询，前后端代码都有。在此过程中，也遇到各种奇奇怪怪的问题，就发现网上的好多东西都没有起到太大的帮助，甚至网上很多都是错误的。会发现很多都无法再现，所以这次我把遇到的坑，以及整个前后端的代码都赋值上去，如果有问题，欢迎大家和我讨论学习。

一、分页查询

最简单的总结就是，对查询的数据分页展示，方便我们查看数据，我们会根据数据的总条数（totalCount），当前查询的页码（pageNo），每页的条数（pageSize），对应分页查询的数据信息（Items），总页码数pageCount封装成功分页数据，传送给前端，这里最简单的公式就是pageCount = (TotalCount+ pageSize- 1) / pageSize，解释也非常简单，总数据条数等于每一个页的条数乘以一共的页数，但是如果最后一页的条数小于每一页规定条数，则需要一共的页码数-减去一，然后成每页的条数，最后加上最后一页的条数，所以就得到以上的公式了。大家可以自己推算一下就可以了。所以分页查询的实体类PageData核心的属性包括pageNo，pageSize，totalCount，items，pageCount。

二、Mybatis+SpringMVC

关于这两个框架，网上的资料非常多，所以我这里就不再赘述了，大家可以自己学习一下，这里我就想说，框架的学习一定要注意准寻框架的需求，可能觉得出现任何一个问题，就会导致你的程序无法运行出来。尤其时springMVC的各种配置以及依赖的jar包我都会给家截图分享出来。

三、前端展示

我是一名后端开发人员所以我就简单做了一个前端的分页，可以从第一页到最后一页的查询，也可以直接跳转到对应的页码，在做前端的时候发现也遇到很多问题，尤其时div以及table中的赋值，都是非常重要的。所以我都把自己的代码分享出来。希望对初学者有所帮助。

三、工程简介

以上我做的分页查询和之前我写的测试类有的融合在一起，组织工程的时候可以别和我的一样，以下我把我用到的实体类（api）、服务层（svc）、数据处理层（dao）以及rest层相关的代码分享处理。

四、api层代码

在代码的设计上服从标准的前端发送请求到rest层，rest层调对应服务的api，然后api到具体的服务svc，然年svc调对应的dao层数据处理服务，然后把数据返回到rest层，然后渲染到前端。严格遵从mvc的模式。保证各个环节时松耦合的。
api层
实体类

package api;import java.util.Date;public class NbcNographTask {/*** 序列号serialVersionUID*/private static final long serialVersionUID = -101342686862547630L;/*** 主键**/private Long id;/*** 报刊代号**/private String bkdh;/*** 产品id**/private String spuId;/*** 产品名称**/private String spuName;/*** 原始报刊封面图**/private String originalBkfmturl;/*** 处理之后的报刊封面图**/private String laterBkfmturl;/*** 处理状态**/private String solveState;/*** 图片状态**/private String graphState;/*** 图片状态描述*/private String graphStateMark;/*** 创建人**/private String createBy;/*** 创建时间**/private Date createTime;/*** 修改人**/private String updateBy;/*** 修改时间**/private Date updateTime;/*** 备用字段1**/private String field1;/*** 备用字段2**/private String field2;/*** 备用字段3**/private String field3;/* ------------------------ 扩展属性 ------------------------ */public static final String TABLE = "NBC_NOGRAPH_TASK";public static final String KEYS = "ID";public static final String FIELDS = "ID,BKDH,SPU_ID,SPU_NAME,ORIGINAL_BKFMTURL,LATER_BKFMTURL,SOLVE_STATE,GRAPH_STATE,GRAPH_STATE_MARK,CREATE_BY,CREATE_TIME,UPDATE_BY,UPDATE_TIME,FIELD1,FIELD2,FIELD3";public String getBkdh() {return bkdh;}public void setBkdh(String bkdh) {this.bkdh = bkdh;}public String getSpuId() {return spuId;}public void setSpuId(String spuId) {this.spuId = spuId;}public String getSpuName() {return spuName;}public void setSpuName(String spuName) {this.spuName = spuName;}public String getOriginalBkfmturl() {return originalBkfmturl;}public void setOriginalBkfmturl(String originalBkfmturl) {this.originalBkfmturl = originalBkfmturl;}public String getLaterBkfmturl() {return laterBkfmturl;}public void setLaterBkfmturl(String laterBkfmturl) {this.laterBkfmturl = laterBkfmturl;}public String getSolveState() {return solveState;}public void setSolveState(String solveState) {this.solveState = solveState;}public String getGraphState() {return graphState;}public void setGraphState(String graphState) {this.graphState = graphState;}public String getGraphStateMark() {return graphStateMark;}public void setGraphStateMark(String graphStateMark) {this.graphStateMark = graphStateMark;}public String getCreateBy() {return createBy;}public void setCreateBy(String createBy) {this.createBy = createBy;}public Date getCreateTime() {return createTime;}public void setCreateTime(Date createTime) {this.createTime = createTime;}public String getUpdateBy() {return updateBy;}public void setUpdateBy(String updateBy) {this.updateBy = updateBy;}public Date getUpdateTime() {return updateTime;}public void setUpdateTime(Date updateTime) {this.updateTime = updateTime;}public String getField1() {return field1;}public void setField1(String field1) {this.field1 = field1;}public String getField2() {return field2;}public void setField2(String field2) {this.field2 = field2;}public String getField3() {return field3;}public void setField3(String field3) {this.field3 = field3;}
}

api，具体的查询服务

package api;import java.util.List;
import java.util.Map;import cn.chinapost.cpsd.coral.db.paging.PageData;public interface IGraphSelectService {public List<Map> getInfo();public boolean update(Map<String,Object> reqMap);public PageData getPageInfo(Map<String,Object> reqMap);
}

四、svc层代码

package svc;import java.util.List;
import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import api.IGraphSelectService;
import cn.chinapost.cpsd.coral.db.paging.PageData;
import dao.ICollectDataBaseDao;@Service
public class GraphSelectService implements IGraphSelectService {@Autowiredprivate ICollectDataBaseDao collectDataBaseDao;@Overridepublic List<Map> getInfo() {System.out.println("服务层接受到查询数据");List<Map> resultListMap = collectDataBaseDao.selectGraphInfo();for (Map temp : resultListMap) {System.out.println(temp.get("bkdh"));}return resultListMap;}@Overridepublic boolean update(Map<String, Object> reqMap) {System.out.println("服务层接收到更新数据");boolean flag = collectDataBaseDao.updateStatus(reqMap);return flag;}@Overridepublic PageData getPageInfo(Map<String, Object> reqMap) {System.out.println("分页查询的入参为" + reqMap);        List<List<Map>> resultMap = collectDataBaseDao.selectPage(reqMap);PageData resultPageData = packPageInfo(reqMap, resultMap);return resultPageData;}private PageData packPageInfo(Map reqMap, List<List<Map>> nbcNographTaskList) {int pageIndex = (int) reqMap.get("pageIndex");int pageSize = (int) reqMap.get("pageSize");PageData pageData = new PageData();pageData.setPageNo(pageIndex);pageData.setPageSize(pageSize);pageData.setItems( nbcNographTaskList.get(0));pageData.setPageCount(countInfo(Integer.parseInt(nbcNographTaskList.get(1).get(0).get("total").toString()) , pageSize));pageData.setTotalCount(Integer.parseInt(nbcNographTaskList.get(1).get(0).get("total").toString()));return pageData;}private int countInfo(int count, int limit) {return (count + limit - 1) / limit;}
}

这里大家一定别把注解@Service忘了，这个非常重要，sping的服务都是从容器中注入的。

五、dao层代码

package dao;import java.util.List;
import java.util.Map;import api.NbcNographTask;public interface ICollectDataBaseDao {public List<Map> selectGraphInfo();public boolean updateStatus(Map<String,Object> reqMap);public boolean insertInfo(Map<String,Object> reqMap);public List<Map> selectByPage(Map reqMap);public List<List<Map>> selectPage(Map reqMap);
}

package dao;import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.springframework.stereotype.Repository;import cn.chinapost.cpsd.coral.db.paging.PageData;@Repository
public class CollectDataBaseDao implements ICollectDataBaseDao {@Overridepublic List<Map> selectGraphInfo() {SqlSession sqlSession = getSessionFactory().openSession();ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);// test selectList<Map> nbcNographTaskList = userMapper.selectGraphInfo();System.out.println("MyBatisTest:" + nbcNographTaskList.get(0).get("bkdh"));// it is a must or no data will be insert into server.sqlSession.commit();return nbcNographTaskList;}@Overridepublic boolean updateStatus(Map<String, Object> reqMap) {SqlSession sqlSession = getSessionFactory().openSession();ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);// test updateboolean result = userMapper.updateStatus(reqMap);System.out.println("MyBatisTest update:" + result);// it is a must or no data will be insert into server.sqlSession.commit();return result;}@Overridepublic boolean insertInfo(Map<String, Object> reqMap) {SqlSession sqlSession = getSessionFactory().openSession();ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);//test insertboolean result = userMapper.insertInfo(reqMap);System.out.println("MyBatisTest insert:" + result);sqlSession.commit();return result;}@Overridepublic List<Map> selectByPage(Map reqMap) {SqlSession sqlSession = getSessionFactory().openSession();ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);//test select by pageList<Map> resultLsit = userMapper.selectByPage(reqMap);return resultLsit;}@Overridepublic List<List<Map>> selectPage(Map reqMap) {SqlSession sqlSession = getSessionFactory().openSession();ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);//test select by pageList<List<Map>> resultMap = userMapper.selectPage(reqMap);return resultMap;}/*** 获得MyBatis SqlSessionFactory* SqlSessionFactory负责创建SqlSession，一旦创建成功，就可以用SqlSession实例来执行映射语句，commit，rollback，close等方法。* */private static SqlSessionFactory getSessionFactory() {SqlSessionFactory sessionFactory = null;String resource = "spring/mybatis-config.xml";try {sessionFactory = new SqlSessionFactoryBuilder().build(Resources.getResourceAsReader(resource));} catch (IOException e) {e.printStackTrace();}return sessionFactory;}}

这里时一个dao层的api和一个对应实现类，这里大家也别忘了对应的@Repository注解。

六、rest层代码

package rest;import java.util.HashMap;
import java.util.List;
import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import api.IGraphSelectService;
import api.NbcNographTask;
import cn.chinapost.cpsd.coral.db.paging.PageData;
import cn.chinapost.zxpt.common.util.JsonUtils;@Controller
public class SelectController {@Autowiredprivate IGraphSelectService graphSelectService;@RequestMapping("/index")public String sigup() {// 进入页面的入口return "index";}@RequestMapping("/testJson")@ResponseBodypublic Map<String, Object> testJson(@RequestBody NbcNographTask nbcNographTask) {System.out.println("bkdh=" + nbcNographTask.getBkdh() + ",spuId=" + nbcNographTask.getSpuId() + ",spuName="+ nbcNographTask.getSpuName());List<Map> resultList = graphSelectService.getInfo();System.out.println("输出的结果为" + resultList);Map<String, Object> resultMap = new HashMap<String, Object>();resultMap.put("result", resultList);return resultMap;}@RequestMapping("/testUpdate")@ResponseBodypublic Map<String, Object> testUpdate(@RequestBody Map<String, Object> reqMap) {System.out.println("spuId=" + reqMap.get("spuId"));boolean flag = graphSelectService.update(reqMap);System.out.println("更新结果为" + flag);Map<String, Object> resultMap = new HashMap<String, Object>();resultMap.put("result", flag);return resultMap;}@RequestMapping("/getPageInfo")@ResponseBodypublic Map<String, Object> getPageInfo(@RequestBody Map<String, Object> reqMap) {System.out.println("pageIndex=" + reqMap.get("pageIndex") + "pageSize=" + reqMap.get("pageSize"));PageData pageData = graphSelectService.getPageInfo(reqMap);System.out.println("更新结果为" + JsonUtils.parseObject(pageData) );Map<String, Object> resultMapInfo = new HashMap<String, Object>();resultMapInfo.put("result", pageData);return resultMapInfo;}}

七、核心的xml配置文件

这里有三个核心配置文件
（1）springmvc-servlet配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsd"><!-- 使用扫描机制扫描控制器类，控制器类都在controller包及其子包下 --><bean class="org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor" /><context:component-scan base-package="rest" /><context:component-scan base-package="svc"/><context:component-scan base-package="dao"/><mvc:annotation-driven /><mvc:default-servlet-handler/><!-- annotation-driven用于简化开发的配置，注解DefaultAnnotationHandlerMapping和AnnotationMethodHandlerAdapter --><!-- 使用resources过滤掉不需要dispatcherservlet的资源（即静态资源，例如css、js、html、images）。在使用resources时必须使用annotation-driven，否则resources元素会阻止任意控制器被调用 --><!-- 配置视图解析器 --><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/jsp/" /><property name="suffix" value=".jsp" /></bean>
</beans>

（2）mybatis-config文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration><properties resource="spring/db.properties" /><typeAliases><package name="api" /></typeAliases><environments default="development"><environment id="development"><transactionManager type="JDBC" /><dataSource type="POOLED"><property name="driver" value="${driver}" /><property name="url" value="${url}" /><property name="username" value="${username}" /><property name="password" value="${password}" /></dataSource></environment></environments><mappers><mapper resource="dao/GraphMapper.xml" /></mappers>
</configuration>

（3）写sql的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="dao.ICollectDataBaseDao"><resultMap type="Map" id="nbcNographTaskMap"><id property="spuId" column="SPU_ID" /><result property="bkdh" column="BKDH" /><result property="spuId" column="SPU_ID" /><result property="spuName" column="SPU_NAME" /></resultMap><!--根据产品id，查询产片图片处理任务列表 --><select id="getGraph" parameterType="String" resultType="NbcNographTask"resultMap="nbcNographTaskMap">SELECT * from NBC_NOGRAPH_TASK STWHERE ST.SPU_ID = #{spuId}</select><!-- 查询处理图片任务列表 --><select id="selectGraphInfo" resultType="NbcNographTask"resultMap="nbcNographTaskMap">SELECT * from NBC_NOGRAPH_TASK</select><!-- 更新产品任务列表 --><update id="updateStatus" parameterType="java.util.Map">UPDATE NBC_NOGRAPH_TASKSET solve_state = '01' where SPU_ID=#{spuId}</update><!-- 插入产品任务表数据 --><insert id="insertInfo" parameterType="java.util.Map">INSERT INTONBC_NOGRAPH_TASK (bkdh,spu_id,spu_name,solve_state,graph_state)VALUES(#{bkdh},#{spuId},#{spuName},#{solveState},#{graphState})</insert><!-- 新增分页查询方法 --><select id="selectByPage" parameterType="java.util.Map"resultType="NbcNographTask" resultMap="nbcNographTaskMap">SELECT * from NBC_NOGRAPH_TASK ORDER BY create_time DESC<if test="pageIndex!=null and pageSize!=null">limit #{pageIndex},#{pageSize}</if></select><resultMap type="java.util.Map" id="count"><result property="total" column="total"/></resultMap><select id="selectPage" parameterType="java.util.Map" resultMap="nbcNographTaskMap,count"><!-- SELECT * FROM NBC_NOGRAPH_TASK WHERE ID in (SELECT ID from (SELECT ID FROM NBC_NOGRAPH_TASK LIMIT ${(pageIndex-1)*pageSize},#{pageSize} ) AS t) order by ID; SELECT FOUND_ROWS() AS total; -->SELECT SQL_CALC_FOUND_ROWS * FROM NBC_NOGRAPH_TASK order by IDLIMIT ${(pageIndex-1)*pageSize},#{pageSize};SELECT FOUND_ROWS() AS total;</select></mapper>

在这里通过这样的sql，可以每次分页查询到对应的数据总条数，方便分页页数的计算。一个sql查询两个结果。提升查询效率，这个我看了很多网上的代码，基本上都时没法运行出合理的结果的，每次返回的总数都是对应的分页查询的结果的总数，其实这样的总数没有任何意义的，大家一定要按照我的写。
（4）db.propertis中因为数据查询要支持多sql查询所以一定要加上

allowMultiQueries=true

八、前端jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javaScript"src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
</head>
<body><form align='center' method="post"action="${pageContext.request.contextPath}/getPageInfo">报刊代号：<input type="text" name="bkdh" id="bkdh" /> 产品id：<inputtype="text" name="spuId" id="spuId" /> 产品名称：<input type="text"name="spuName" id="spuName"> <input type="button" value="查询"onclick="selectByPage(1)" /></form><br><table id="tab" border=1 align='center' height="100%" width="100%"><tr><th>报刊代号</th><th>产品id</th><th>产品名称</th><th>图片处理状态</th><th>操作</th></tr></table><div id="myButton" align="right"></div>
</body>
<script type="text/javaScript">function selectByPage(index) {//获取输入的值pname为id//    alert(index);var pageIndex = index;var pageSize = 5;$.ajax({//请求路径url : "${pageContext.request.contextPath}/getPageInfo",//请求类型type : "POST",//data表示发送的数据data : JSON.stringify({pageIndex : pageIndex,pageSize : pageSize}), //定义发送请求的数据格式为JSON字符串contentType : "application/json;charset=utf-8",//定义回调响应的数据格式为JSON字符串，该属性可以省略dataType : "json",//成功响应的结果success : function(data) {if (data != null) {//分页显示showPageData(data);//显示对应的页数信息已经对应的按钮showPageButton(data);} else {alert("数据没有传过来");}}});}function showPageButton(data) {$("#myButton").html('');var strButton = "一共" + data.result.pageCount + "页  ";for (var i = 1; i <= data.result.pageCount; i++) {strButton += "<button type='" + "submit" + "'" + "name='"+ "currentPage" + "'" + "value=" + i+ " οnclick='selectByPage(" + i + ")'" + ">" + i+ "</button> "}//可以直接条道第几页strButton += "跳转到 <input onkeydown ='EnterPress(pageNum"+","+data.result.pageCount+")' id = 'pageNum' type='number'  min='1' max='"+ data.result.pageCount + "'/> 页"$("#myButton").append(strButton)}function EnterPress(pageNum,count) {//alert("pageNum"+document.getElementById("pageNum").value+"count"+count);var e = window.event || arguments.callee.caller.arguments[0];if (e.keyCode == 13) {if(count<document.getElementById("pageNum").value){selectByPage(parseInt(count));}else{selectByPage(parseInt(document.getElementById("pageNum").value));}}}function testUpdate(spuId, pageNo) {//获取输入的值pname为id//var bkdh = dr.parentNode.parentNode.childNodes[0].innerText;var spuId = spuId;$.ajax({//请求路径url : "${pageContext.request.contextPath}/testUpdate",//请求类型type : "POST",//data表示发送的数据data : JSON.stringify({spuId : spuId}), //定义发送请求的数据格式为JSON字符串contentType : "application/json;charset=utf-8",//定义回调响应的数据格式为JSON字符串，该属性可以省略dataType : "json",//成功响应的结果success : function(data) {if (data != null) {/*  alert("输入的用户名：" + data.bkdh + "，密码：" + data.spuId+ "， 年龄：" + data.spuName); *///alert("更新的结果为" + data.result);//showData(data);if (data.result) {selectByPage(pageNo);//showSuccessMsg();}} else {alert("数据没有传过来");}}});}function testJson() {//获取输入的值pname为id//alert($("#bkdh").val());var bkdh = $("#bkdh").val();var spuId = $("#spuId").val();var spuName = $("#spuName").val();$.ajax({//请求路径url : "${pageContext.request.contextPath}/selectByPage",//请求类型type : "POST",//data表示发送的数据data : JSON.stringify({bkdh : bkdh,spuId : spuId,spuName : spuName}), //定义发送请求的数据格式为JSON字符串contentType : "application/json;charset=utf-8",//定义回调响应的数据格式为JSON字符串，该属性可以省略dataType : "json",//成功响应的结果success : function(data) {if (data != null) {/*  alert("输入的用户名：" + data.bkdh + "，密码：" + data.spuId+ "， 年龄：" + data.spuName); *///alert("结果集" + data.result[0].bkdh);showData(data);} else {alert("数据没有传过来");}}});}function showPageData(data) {$("#tab tr:gt(0)").remove()var str = "";for (var i = 0; i < data.result.items.length; i++) {if (data.result.items[i].solve_state == "00") {var str = "<tr id ='dr"+i+"'"+"><td align="+"'center' >"+ data.result.items[i].bkdh+ "</td><td align="+"'center'"+">"+ data.result.items[i].spuId+ "</td><td align="+"'center'"+">"+ data.result.items[i].spuName+ "</td><td align="+"'center'"+">"+ data.result.items[i].solve_state + "(未处理)"+ "<td align = 'center'>"+ "<input value= '更新状态' type= 'button' "+ " οnclick='testUpdate("+ String(data.result.items[i].spuId) + ","+ data.result.pageNo + ")'" + "/>" + "</td></tr>"} else {var str = "<tr><td align="+"'center'" +">"+ data.result.items[i].bkdh+ "</td><td align="+"'center'"+">"+ data.result.items[i].spuId+ "</td><td align="+"'center'"+">"+ data.result.items[i].spuName+ "</td><td align="+"'center'"+">"+ data.result.items[i].solve_state + "(已处理)"+ "</td></tr>"}$("#tab").append(str);}}function showData(data) {//alert("123");$("#tab tr:gt(0)").remove()var str = "";for (var i = 0; i < data.result.items.length; i++) {if (data.result.items[i].solve_state == "00") {var str = "<tr id ='dr"+i+"'"+"><td align="+"'center' >"+ data.result.items[i].bkdh+ "</td><td align="+"'center'"+">"+ data.result.items[i].spuId+ "</td><td align="+"'center'"+">"+ data.result.items[i].spuName+ "</td><td align="+"'center'"+">"+ data.result.items[i].solve_state + "(未处理)"+ "<td align = 'center'>"+ "<input value= '更新状态' type= 'button' "+ " οnclick='testUpdate(this)'" + "/>" + "</td></tr>";} else {var str = "<tr><td align="+"'center'" +">"+ data.result.items[i].bkdh+ "</td><td align="+"'center'"+">"+ data.result.items[i].spuId+ "</td><td align="+"'center'"+">"+ data.result.items[i].spuName+ "</td><td align="+"'center'"+">"+ data.result.items[i].solve_state + "(已处理)"+ "</td></tr>"}$("#tab").append(str);}}
</script>
</html>

九、结果演示

（1）前端入口-之前我了条件查询，后来方便查询，没有用这些查询条件

（2）查询结果

（3）点解更新状态之后会再次加载对应的分页查询

（4）跳转查询

（5）如果填写的页数超过分页的最大页数，则会默认跳转到最后一页

总结

我想说，框架的学习对于初学者真的挺难的，不是他的逻辑有多难，而是他的要求很多，需要严格按照他的要求做，所以大家经常那怕一个问题解决不了就出现了其他的问题。整的自己不想学习了，在这里我想鼓励大家，只要上手之后一切都很简单的，在实际的公司中，大家都是在实际的业务逻辑，框架都是搭建好的。所以大家平时还是要多学java基础知识。一切的框架都简历在基础的知识之上。最后大家有时候复制代码后可能赋值的东西格式有问题，有时候可以前看前端的源码，如果发现页码出现了乱码，大家别担心，有的时候需要手动输入一下，祝大家都能在程序员的道路上越走越远，相信自己！