jqgrid mysql 分页_15.jqGrid 分页整合

jqGrid 分页整合

感兴趣的朋友可以去关注一下。

文章总览

前一个实验中已经实现了分页接口，本节实验将会结合实际的页面和 JqGrid 分页插件进行分页功能的效果展示。

知识点

JqGrid 分页插件介绍

JqGrid 分页插件整合

分页功能实践

环境

JDK 1.8 或者更高版本

Spring Boot 2.1.0-RELEASE

Maven 3+

JqGrid 分页插件介绍

JqGrid 是一个用来显示网格数据的 jQuery 插件，通过使用 jqGrid 可以轻松实现前端页面与后台数据的 Ajax 异步通信并实现分页功能，特点如下：

兼容目前所有流行的 web 浏览器；

完善强大的分页功能；

支持多种数据格式解析，XML、JSON、数组等形式；

提供丰富的选项配置及方法事件接口；

支持表格排序，支持拖动列、隐藏列；

支持滚动加载数据；

开源免费

本教程选择的版本为 5.3.0，将代码压缩包解压后可以看到 JqGrid 正式包的目录结构如下：

使用 JqGrid 时必要的文件如下：

## js文件

jquery.jqGrid.js

grid.locale-cn.js

jquery.jqGrid.js

## 样式文件

ui.jqgrid-bootstrap-ui.css

ui.jqgrid-bootstrap.css

ui.jqgrid.css

主要是 js 文件和 css 样式文件，如果想使用 JqGrid 其他特性的话对应的引入其 js 文件即可。

本课程的实战 所有模块的分页插件都是使用 JqGrid 插件实现的，它的分页功能十分强大，而且使用和学习起来都比较简单，JqGrid 还有其他优秀的特性，本系统只使用了其部分特性，感兴趣的朋友可以继续学习其相关知识。

JqGrid 分页插件整合

资源导入

整合过程其实是我们把 JqGrid 代码压缩包中我们需要的样式文件、js 文件、图片等静态资源放入我们项目的静态资源目录下，比如 static 目录或者其他我们设置的静态资源目录，几个重要的文件我们都在下图中用红线进行标注了，目录如下：

之后就可以在各个需要分页的页面中引用该插件资源并实现分页功能了。

整合过程

首先在 html 文件中引入 JqGrid 所需文件：

在页面中需要展示分页数据的区域添加如下代码，用于 JqGrid 初始化：

调用 JqGrid 分页插件的 jqGrid() 方法渲染分页展示区域，代码如下：

$('#jqGrid').jqGrid({

url: 'users/list', // 请求后台json数据的url

datatype: 'json', // 后台返回的数据格式

colModel: [

// 列表信息：表头 宽度 是否显示 渲染参数 等属性

{

label: 'id',

name: 'id',

index: 'id',

width: 50,

hidden: true,

key: true,

},

{

label: '登录名',

name: 'userName',

index: 'userName',

sortable: false,

width: 80,

},

{

label: '添加时间',

name: 'createTime',

index: 'createTime',

sortable: false,

width: 80,

},

],

height: 485, // 表格高度 可自行调节

rowNum: 10, // 默认一页显示多少条数据 可自行调节

rowList: [10, 30, 50], // 翻页控制条中 每页显示记录数可选集合

styleUI: 'Bootstrap', // 主题 这里选用的是Bootstrap主题

loadtext: '信息读取中...', // 数据加载时显示的提示信息

rownumbers: true, // 是否显示行号，默认值是false，不显示

rownumWidth: 35, // 行号列的宽度

autowidth: true, // 宽度自适应

multiselect: true, // 是否可以多选

pager: '#jqGridPager', // 分页信息DOM

jsonReader: {

root: 'data.list', //数据列表模型

page: 'data.currPage', //数据页码

total: 'data.totalPage', //数据总页码

records: 'data.totalCount', //数据总记录数

},

// 向后台请求的参数

prmNames: {

page: 'page',

rows: 'limit',

order: 'order',

},

// 数据加载完成并且DOM创建完毕之后的回调函数

gridComplete: function () {

//隐藏grid底部滚动条

$('#jqGrid').closest('.ui-jqgrid-bdiv').css({ 'overflow-x': 'hidden' });

},

});

分页数据格式详解

在 JqGrid 整合中有如下代码：

jsonReader: {

root: "data.list", //数据列表模型

page: "data.currPage", //当前页码

total: "data.totalPage", //数据总页码

records: "data.totalCount" //数据总记录数

}

这里定义的是 jsonReader 对象如何对后端返回的 json 数据进行解析，比如数据列表为何读取 "data.list"，当前页码为何读取 "data.currPage"，这些都是由后端返回的数据格式所决定的，后端响应结果的数据格式定义在com.lou.springboot.common.Result 类中：

public class Result implements Serializable {

//响应码 200为成功

private int resultCode;

//响应msg

private String message;

//返回数据

private T data;

}

即所有的数据都会被设置到 data 属性中，分页结果集的数据格式定义如下(注：完整代码位于com.lou.springboot.util.PageResult)：

public class PageResult implements Serializable {

//总记录数

private int totalCount;

//每页记录数

private int pageSize;

//总页数

private int totalPage;

//当前页数

private int currPage;

//列表数据

private List> list;

}

由于 JqGrid 分页插件在实现分页功能时必须以下四个参数：当前页的所有数据列表、当前页的页码、总页码、总记录数量，因此我们封装了 PageResult 对象，并将其放入 Result 返回结果的 data 属性中，之后在 JqGrid 读取时直接读取对应的参数即可，这就是前后端进行数据交互时的格式定义，希望大家能够结合代码以及实际的分页效果进行理解和学习。

分页功能实践

由于分页接口在前一个实验中已经开发完成，本实验中只需要将前端页面实现即可。

前端页面

在 resources/static 下新建 user.html，代码如下：

```htmllou.springboot | 用户管理页