在jqGrid中进行分页可以通过以下步骤实现:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.6/css/ui.jqgrid.min.css">
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.6/js/jquery.jqgrid.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>
$(document).ready(function() {
$("#grid").jqGrid({
url: "data.php", // 数据源URL
datatype: "json", // 数据类型
colModel: [ // 列模型
{ name: "id", label: "ID", width: 50 },
{ name: "name", label: "姓名", width: 100 },
{ name: "age", label: "年龄", width: 50 }
],
rowNum: 10, // 每页显示的记录数
rowList: [10, 20, 30], // 每页显示记录数的下拉列表
pager: "#pager", // 分页控件的ID
sortname: "id", // 默认排序列
sortorder: "asc", // 默认排序方式
viewrecords: true, // 显示总记录数
autowidth: true, // 自动调整列宽
height: "auto" // 表格高度自适应
});
});
<?php
// 数据库连接
$conn = mysqli_connect("localhost", "username", "password", "database");
// 查询数据
$result = mysqli_query($conn, "SELECT * FROM users");
// 将查询结果转换为JSON格式
$rows = array();
while ($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
}
echo json_encode($rows);
?>
请注意,以上示例仅为演示目的,实际情况中需要根据具体需求进行适当调整。
通过以上步骤,你就可以在jqGrid中实现分页功能了。当表格数据量较大时,分页可以提高用户体验,并减轻前端加载压力。对于更复杂的需求,jqGrid还提供了许多其他选项和功能,可以根据具体情况进行配置和定制。
领取专属 10元无门槛券
手把手带您无忧上云