SpringBoot+Mybatis+Jqgrid实现分页显示

       此处就不对SpringBoot+Mybatis等环境进行说明，主要细说实现Jqgrid的分页显示功能的具体步骤，首先得去Jqgrid官网下载js插件包，链接为：Jqgrid在线开发文档，此链接里面还有具体的教程解说和代码样例，非常适合读者去查看，下面开始进入正题。

（1）entity实体层如下：

/*
 * @description: 学生基本信息
 * 
 * */
public class Student {
	
	private int id;//主键
	private String name;//姓名
	private String age;//年龄
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}
	
	
}

（2）Controller层编写：

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletRequest;

import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.google.gson.Gson;
import com.grkj.redis.entity.Student;
import com.grkj.redis.service.StudentService;

@Controller
@RequestMapping(path = "/student")
public class StudentController {
	@Autowired
	private StudentService studentService;
	
	@SuppressWarnings("rawtypes")
	@GetMapping(path = "/getListPage")
	@ResponseBody
	public String getListPage(ServletRequest request) {

		List<Student> students = studentService.selectAll();
		//总数
		int i = students.size();
		//每一页是多少条数据
		int rows = Integer.parseInt(request.getParameter("rows"));
		//页数
		int page = Integer.parseInt(request.getParameter("page"));
		int total = 1;
		if(i > rows && ( i % rows ) != 0) {
			total = i/rows+1;
		}else if(i<rows){
			total = 1;
		}
		else {
			total = i/rows;
		}
		//分页显示
		List<Student> listPage = studentService.getListPage(rows, page);
		String str = new Gson().toJson(listPage);
		//构造的传输数据格式
		str = "{\"page\":\""+page+"\",\"records\":\""+i+"\",\"total\":\""+total+ "\",\"rows\":"+str+"}"; 
		return str;
	}
}

       在编写控制台代码时，笔者先是遍历Jqgrid发起的request请求中所有参数，查看它提交到后端的参数有哪些，然后通过浏览器控制台看到Jqgrid需要接收的数据格式，于是就想办法来构造这个数据格式，给Jqgrid进行解析。
       此处需要在pom.xml文件中引入Gson包，如下：

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
		</dependency>
		<dependency>
			<groupId>org.json</groupId>
			<artifactId>json</artifactId>
		</dependency>

（3）Service层代码如下：

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;


import com.gdupt.demo.admin.dao.StudentMapper;
import com.gdupt.demo.admin.entity.Student;

@Service
public class StudentService {
	
	@Autowired
	private StudentMapper studentMapper;
	
	//查询总数
	public List<Student> selectAll(){
		return studentMapper.selectAll();
	}	
	
	//查询分页数据
	public List<Student> getListPage(int pageSize,int page){
		Map<String,Object> map = new HashMap<String,Object> ();
		int pageStart = pageSize*(page-1);
		map.put("pageSize", pageSize);
		map.put("pageStart", pageStart);
		return studentMapper.getListPage(map);
	}
	
}

（4）dao层的代码如下：

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import com.gdupt.demo.admin.entity.Student;

@Mapper
public interface StudentMapper {

	public List<Student> getListPage(Map<String, Object> map);
	public List<Student> selectAll();	
}

XML文件的SQL语句如下：

<?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" >
<!-- 此处的命名空间namespace需要根据自己的StudentMapper包路径进行修改 -->
<mapper namespace="com.gdupt.demo.admin.dao.StudentMapper">
	<select id="listPage" resultType="map">
		select * from student 
		<where> 
			1=1
			<!--此处为添加查询条件，如果读者有需要可以通过以下模板拓展当前的查询条件，此时需要在Service层的map值中设置name值，具体操作可能需要调整控制层的代码
			<if test="name!=null and name !='' ">
				and name like '%${name}%'
			</if>
			-->
		</where>
		<!--  pageStart和pageSize可以自动解析mapper层提交过来的map值中对应的key值  -->
		limit #{pageStart},#{pageSize}
	</select>
</mapper>

前端页面的代码编写如下：（此处的Jqgrid插件需要读者自行去下载，如果不清楚下载地址，可在文章开头进入Jqgrid官网进行下载。）

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="/static/plugin/jquery/jquery-2.2.2.min.js"></script>
<script type="text/javascript"
		src="/static/plugin/jqgrid/js/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" href="/static/plugin/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" href="/static/plugin/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="/static/plugin/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript">
	$(function() {
		//页面加载完成之后执行
		pageInit();
	});
	function pageInit() {
		//创建jqGrid组件
		//当浏览器调整大小时，调整jqGrid的大小
		$(window).bind('resize', function () {
		        $("#list").setGridWidth($('.col-md-12').width());
		}).trigger('resize');
	
		jQuery("#list").jqGrid(
		{
			url : '/student/getListPage',//组件创建完成之后请求数据的url，读者可以根据自己的
			datatype : "json",//请求数据返回的类型。可选json,xml,txt
			colNames : [ '学号', '姓名', '年龄'],//jqGrid的列显示名字
			colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式等，并且每个字段名称都需要对应异步请求返回的数据字段，才能匹配上
				{name : 'id',index : 'id',width : 55,align : "center"},
				{name : 'name',index : 'name',width : 90,align : "center"}, 
				{name : 'age',index : 'age',width : 100,align : "center"}, 
			],
			height: $(window).height()-100,//获取电脑屏幕的大小并且减去特定的值
		    autowidth: true,//如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；
			shrinkToFit: true,//如果设为true，则Grid的宽度会根据父容器的宽度自动重算。
			rowNum : 10,//一页显示多少条
			rownumbers: true,//显示编号
			rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
			pager : '#pager',//表格页脚的占位符(一般是div)的id
			sortname : 'no',//初始化的时候排序的字段
			sortorder : "desc",//排序方式,可选desc,asc
			mtype : "get",//向后台请求数据的ajax的类型。可选post,get
			viewrecords : true,//是否显示总条数
			hidegrid: false,
			multiselect: false, //是否支持多选
			caption : "学生基本信息"//表格的标题名字
		});
		/*创建jqGrid的操作按钮容器*/
		/*可以控制界面上增删改查的按钮是否显示*/
		jQuery("#list").jqGrid('navGrid', '#pager', {
			edit : false,
			add : false,
			del : false
		});
	}
</script>
</head>
<body>
	<table id="list"></table>
	<!-- 此处的div必须要有，第一个是生成list列表，第二个是生成分页工具 -->
	<div id="page"></div>
</body>
</html>