【基于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"/>

<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({
     
        //请求后台 JSON 数据的 URL
        url: 'users/list',
        //后台返回的数据格式
        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',
        loadtext: '信息读取中...',
        rownumbers: true,   // 是否显示行数 
        rownumWidth: 35,
        autowidth: true,
        multiselect: true, // 是否显示复选框 
        //分页信息 DOM
        pager: "#jqGridPager",
        jsonReader: {
     
            root: "data.list",
            page: "data.currPage",
            total: "data.totalPage",
            records: "data.totalCount"
        },
         // 向后台请求的参数
        prmNames: {
     
            page: "page", // 默认第一页 传递参数为page
            rows: "limit", // 传递参数为limit
            order: "order"
        },
        // 数据加载完成并且 DOM 创建完毕之后的回调函数
        gridComplete: function () {
     
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({
     "overflow-x": "hidden"});
        }
    });
});
}
/**
 * jqGrid重新加载
 */
function reload() {
     
    reset();
    var page = $("#jqGrid").jqGrid('getGridParam', 'page');
    $("#jqGrid").jqGrid('setGridParam', {
     
        page: page
    }).trigger("reloadGrid");
}

3.2 后台代码实现

先来看看前台代码,再来设置后台代码参数

jsonReader: {
     
  root: "data.list", //数据列表模型 
  page: "data.currPage", //当前页码
  total: "data.totalPage", //数据总页码
  records: "data.totalCount" //数据总记录数
  }

如上所示,前端获取到后台返回的list、currPage、totalPage、totalCount参数,所以我们把这几个参数封装到一个PageResult里面，PageResult是服务端返回给客户端的数据

• PageResult.java

  /**
   * 分页工具类
   */
  public class PageResult implements Serializable {
         
  
  	//总记录数
  	private int totalCount;
  	//每页记录数,用于算出总页数
   	private int pageSize;
  	//总页数
  	private int totalPage;
  	//当前页数
  	private int currPage;
  	//列表数据
  	private List<?> list;
  
  	/**
  	 * 分页
  	 * @param list        列表数据
  	 * @param totalCount  总记录数
  	 * @param pageSize    每页记录数
  	 * @param currPage    当前页数
  	 */
  	public PageResult(List<?> list, int totalCount, int pageSize, int currPage) {
         
  		this.list = list;
  		this.totalCount = totalCount;
  		this.pageSize = pageSize;
  		this.currPage = currPage;
  		this.totalPage = (int)Math.ceil((double)totalCount/pageSize);
  	}
  	/**
  	* setter and getter  
  	*/
  }
  

上面的PageResult是服务端返回给客户端的数据,那么客户端请求服务端的时候参数设置应该如下代码,设置传递过来的page和limit,由此可以计算出start = (page-1) * limit

• PageUtil.java

  /**
   * 查询参数
   */
  public class PageUtil extends LinkedHashMap<String, Object> {
         
  	//当前页码
      private int page;
      //每页条数
      private int limit;
      // 前端传递过来不止page和limit两个参数,还有order排列顺序
      public PageUtil(Map<String, Object> params){
         
          this.putAll(params);
  
          //分页参数
          // 比如第4页,0-9 10-19 20-29 30-39
          this.page = Integer.parseInt(params.get("page").toString());
          this.limit = Integer.parseInt(params.get("limit").toString());
          this.put("start", (page - 1) * limit);
          this.put("page", page);
          this.put("limit", limit);
      }
      // setter and getter
  }
  

• AmindUserDao.xml
  增加查询用户列表和查询用户总数

  
      <select id="findAdminUsers" parameterType="Map" resultMap="AdminUserResult">
          select id,user_name,create_time from tb_admin_user
          where is_deleted=0
          order by id desc
          <if test="start!=null and limit!=null">
              limit #{start},#{limit}
          if>
      select>
  
      
      <select id="getTotalAdminUser" parameterType="Map" resultType="int">
          select count(*) from tb_admin_user
          where is_deleted=0
      select>
  

• AdminUserServiceImpl.java

   public PageResult getAdminUserPage(PageUtil pageUtil) {
         
          //当前页的用户列表
          List<AdminUser> users = adminUserDao.findAdminUsers(pageUtil);
          //用户总数
          int total = adminUserDao.getTotalAdminUser(pageUtil);
          //分页信息封装
          PageResult pageResult = new PageResult(users, total, pageUtil.getLimit(), pageUtil.getPage());
          return pageResult;
   }
  

• AdminUserController.java

      @RequestMapping(value = "/list", method = RequestMethod.GET)
      public Result list(@RequestParam Map<String, Object> params) {
         
          //检查参数
          if (StringUtils.isEmpty(params.get("page")) || StringUtils.isEmpty(params.get("limit"))) {
         
              return ResultGenerator.genErrorResult(Constants.RESULT_CODE_PARAM_ERROR, "参数异常！");
          }
          //查询列表数据
          PageUtil pageUtil = new PageUtil(params);
          return ResultGenerator.genSuccessResult(adminUserService.getAdminUserPage(pageUtil));
      }
  

效果