使用jqGrid实现分页的步骤

一、前端页面代码中引入jqGrid分页插件所需的源文件

https://github.com/tonytomov/jqGrid/tags

<link href="plugins/jqgrid-5.5.2/ui.jqgrid-bootstrap4.css" rel="stylesheet"/>
<!-- jqGrid依赖jQuery，因此需要先引入jquery.min.js文件，下方地址为字节跳动提供的cdn地址 -->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

<!-- grid.locale-cn.js 为国际化所需的文件，-cn 表示中文 -->
<script src="plugins/jqgrid-5.5.2/grid.locale-cn.js"></script>
<script src="plugins/jqgrid-5.5.2/jquery.jqGrid.min.js"></script>

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

<!-- jqGrid必要DOM,用于创建表格展示列表数据 -->  
<table id="jqGrid" class="table table-bordered"></table>

<!-- jqGrid必要DOM,分页信息区域 --> 
<div id="jqGridPager"></div>

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

$("#jqGrid").jqGrid({
        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,
        pager: "#jqGridPager",
        jsonReader: {
            root: "data.list", 
            page: "data.currPage", 
            total: "data.totalPage", 
            records: "data.totalCount" 
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
        }
    });

jqGrid() 方法中的参数及含义

url: // 请求后台json数据的url  
datatype: // 后台返回的数据格式
colModel: // 列表信息：表头 宽度 是否显示 渲染参数 等属性
height: // 表格高度  可自行调节
rowNum: // 默认一页显示多少条数据 可自行调节
rowList: // 翻页控制条中 每页显示记录数可选集合
styleUI: // 主题 这里选用的是Bootstrap主题
loadtext: // 数据加载时显示的提示信息
rownumbers: // 是否显示行号，默认值是false，不显示 
rownumWidth: // 行号列的宽度
autowidth: // 宽度自适应
multiselect: // 是否可以多选
pager: // 分页信息DOM
jsonReader: { // 后端处理后传入的数据data
  root:  //数据列表模型
  page:  //数据页码
  total:  //数据总页码
  records: //数据总记录数
},
  // 向后台请求的参数
  prmNames: {
  },
    // 数据加载完成并且DOM创建完毕之后的回调函数 
    gridComplete: function () {
    }
});

jqGrid分页插件在实现分页功能时必须读取以下数据：当前页的所有数据列表、页码、总页码、总记录数量。

四、实现接口返回json数据即可

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107545.html