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 {
@Autowired
private ICollectDataBaseDao collectDataBaseDao;
@Override
public List<Map> getInfo() {
System.out.println("服务层接受到查询数据");
List<Map> resultListMap = collectDataBaseDao.selectGraphInfo();
for (Map temp : resultListMap) {
System.out.println(temp.get("bkdh"));
}
return resultListMap;
}
@Override
public boolean update(Map<String, Object> reqMap) {
System.out.println("服务层接收到更新数据");
boolean flag = collectDataBaseDao.updateStatus(reqMap);
return flag;
}
@Override
public 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 {
@Override
public List<Map> selectGraphInfo() {
SqlSession sqlSession = getSessionFactory().openSession();
ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);
// test select
List<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;
}
@Override
public boolean updateStatus(Map<String, Object> reqMap) {
SqlSession sqlSession = getSessionFactory().openSession();
ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);
// test update
boolean 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;
}
@Override
public boolean insertInfo(Map<String, Object> reqMap) {
SqlSession sqlSession = getSessionFactory().openSession();
ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);
//test insert
boolean result = userMapper.insertInfo(reqMap);
System.out.println("MyBatisTest insert:" + result);
sqlSession.commit();
return result;
}
@Override
public List<Map> selectByPage(Map reqMap) {
SqlSession sqlSession = getSessionFactory().openSession();
ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);
//test select by page
List<Map> resultLsit = userMapper.selectByPage(reqMap);
return resultLsit;
}
@Override
public List<List<Map>> selectPage(Map reqMap) {
SqlSession sqlSession = getSessionFactory().openSession();
ICollectDataBaseDao userMapper = sqlSession.getMapper(ICollectDataBaseDao.class);
//test select by page
List<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 {
@Autowired
private IGraphSelectService graphSelectService;
@RequestMapping("/index")
public String sigup() {
// 进入页面的入口
return "index";
}
@RequestMapping("/testJson")
@ResponseBody
public 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")
@ResponseBody
public 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")
@ResponseBody
public 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/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://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元素会阻止任意控制器被调用 -->
<!-- 配置视图解析器 -->
<bean
class="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 ST
WHERE 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_TASK
SET solve_state = '01' where SPU_ID=#{spuId}
</update>
<!-- 插入产品任务表数据 -->
<insert id="insertInfo" parameterType="java.util.Map">
INSERT INTO
NBC_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 ID
LIMIT ${(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：<input
type="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基础知识。一切的框架都简历在基础的知识之上。最后大家有时候复制代码后可能赋值的东西格式有问题，有时候可以前看前端的源码，如果发现页码出现了乱码，大家别担心，有的时候需要手动输入一下，祝大家都能在程序员的道路上越走越远，相信自己！
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
