【基于SSM后台文档管理系统】 ---- (二) 分页功能的实现

1. 数据交互过程

• 前端将页码和每页条数两个参数通过HTTP请求传输给后端
• 后端获取到这两个参数后进行参数验证(是否合法),查询后将当前页的所有数据实体和数据总量封装
• 后端将封装数据返回给前端
• 前端获取到数据和数据量后分别对当前页数据进行渲染和展示,同时完成分页信息区的计算和展示

2. JqGrid分页插件

JqGrid是一个用来显示网格数据的Jquery插件,通过JqGrid可以实现前端页面与后台数据的AJAX异步通信

导入相关的文件,其中grid.locale-cn.js可以到这里下载,其余到github官方文档下载即可

3. 代码

3.1 前端代码实现

用户管理页面user.html,引入JqGrid所需文件:

<link href="plugins/jqgrid-5.3.0/ui.jqgrid-bootstrap4.css" rel="stylesheet"/>
<!-- JqGrid依赖jquery，因此需要先引入jquery.min.js文件 -->
<script src="plugins/jquery/jquery.min.js"></script>

<script src="plugins/jqgrid-5.3.0/grid.locale-cn.js"></script>
<script src="plugins/jqgrid-5.3.0/jquery.jqGrid.min.js"></script>

<script src="dist/js/user.js"></script>

分页信息区域

<table id="jqGrid" class="table table-bordered">
</table>
<div id="jqGridPager"></div>

user.js

$(function () {
   
    //隐藏错误提示框
    $('.add-error-info').css("display", "none");
    $('.edit-error-info').css("display", "none");

    $("#jqGrid").jqGrid