jqgrid 5.8.2 使用

首先，你需要在你的 HTML 文件里引入 jQuery 和 jqGrid 的相关文件：

<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 jqGrid 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/5.8.2/css/ui.jqgrid.min.css" />

<!-- 引入 jqGrid 的 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/5.8.2/jquery.jqgrid.min.js"></script>

然后，在你的 JavaScript 文件里，定义 jqGrid 的配置：

$(function() {
  $("#jqGrid").jqGrid({
    url: "your_data_url", // 数据请求的 URL
    mtype: "GET", // 请求方式
    datatype: "json", // 数据类型
    colModel: [ // 列定义
      { label: "ID", name: "id", key: true, width: 75 },
      { label: "姓名", name: "name", width: 150 },
      { label: "年龄", name: "age", width: 150 },
      { label: "邮箱", name: "email", width: 150 }
    ],
    viewrecords: true, // 显示总记录数
    height: 250, // 表格高度
    rowNum: 20, // 每页显示的记录数
    rowList: [20, 50, 100], // 每页显示记录数的下拉列表
    pager: "#jqGridPager", // 分页控件的 ID
    caption: "jqGrid 示例" // 表格标题
  });
});

最后，在你的 HTML 文件里，添加一个表格和分页控件的容器：

<!-- 表格容器 -->
<table id="jqGrid"></table>

<!-- 分页控件容器 -->
<div id="jqGridPager"></div>

这样，一个简单的 jqGrid 就配置完成了。当你访问 HTML 文件时，就会看到一个包含数据的表格和分页控件。