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

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配置文件

<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">
    
    <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/>
    
    
    
    <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文件

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配置文件

 
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>

	
	<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 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>产品idth>
			<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 += " + "name='"
					+ "currentPage" + "'" + "value=" + i
					+ " οnclick='selectByPage(" + i + ")'" + ">" + i
					+ " "
		}
		//可以直接条道第几页
		strButton += "跳转到  页"
		$("#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 = "+">+"'center' >"
						+ data.result.items[i].bkdh
						+ "+"'center'"+">"
						+ data.result.items[i].spuId
						+ "+"'center'"+">"
						+ data.result.items[i].spuName
						+ "+"'center'"+">"
						+ data.result.items[i].solve_state + "(未处理)"
						+ ""
						+ "
						+ " οnclick='testUpdate("
						+ String(data.result.items[i].spuId) + ","
						+ data.result.pageNo + ")'" + "/>" + ""
			} else {
				var str = "+"'center'" +">"
						+ data.result.items[i].bkdh
						+ "+"'center'"+">"
						+ data.result.items[i].spuId
						+ "+"'center'"+">"
						+ data.result.items[i].spuName
						+ "+"'center'"+">"
						+ data.result.items[i].solve_state + "(已处理)"
						+ ""

			}
			$("#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 = "+">+"'center' >"
						+ data.result.items[i].bkdh
						+ "+"'center'"+">"
						+ data.result.items[i].spuId
						+ "+"'center'"+">"
						+ data.result.items[i].spuName
						+ "+"'center'"+">"
						+ data.result.items[i].solve_state + "(未处理)"
						+ ""
						+ "
						+ " οnclick='testUpdate(this)'" + "/>" + "";
			} else {
				var str = "+"'center'" +">"
						+ data.result.items[i].bkdh
						+ "+"'center'"+">"
						+ data.result.items[i].spuId
						+ "+"'center'"+">"
						+ data.result.items[i].spuName
						+ "+"'center'"+">"
						+ data.result.items[i].solve_state + "(已处理)"
						+ ""
			}
			$("#tab").append(str);
		}
	}
script>
html>

九、结果演示

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

（2）查询结果

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

（4）跳转查询

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

总结

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