JQuery jqGrid 是一個功能強大的表格控件，它可以實現(xiàn)帶有分頁、排序、篩選等復(fù)雜功能的數(shù)據(jù)表格。下面我們來看一個 jqGrid 的實例，首先需要引入必要的 JS 和 CSS 文件。

接下來就是配置和初始化 jqGrid。如下代碼可以創(chuàng)建一個包含表格數(shù)據(jù)和分頁的 jqGrid。

$(function () {
$("#table").jqGrid({
url: 'data.json',
datatype: "json",
colNames: ['姓名', '年齡', '性別'],
colModel: [
{ name: 'name', index: 'name', width: 100 },
{ name: 'age', index: 'age', width: 80 },
{ name: 'gender', index: 'gender', width: 80 },
],
rowNum: 10,
autowidth: true,
pager: "#pager",
viewrecords: true,
caption: "學(xué)生信息表",
sortname: 'name',
sortorder: 'asc'
});
});

其中，url 指向后臺獲取數(shù)據(jù)的地址，datatype 指定了數(shù)據(jù)類型為 JSON，colNames 定義了表頭，colModel 定義了每一列的屬性，rowNum 指定每頁顯示記錄數(shù)，autowidth 表示自動適應(yīng)表格寬度，pager 定義了分頁條的 ID，viewrecords 表示顯示總記錄數(shù)和當(dāng)前顯示記錄數(shù)，caption 為表格的標(biāo)題，sortname 和 sortorder 表示表格默認按照姓名升序排列。

最后我們在 HTML 中添加 table 和 pager 元素，以呈現(xiàn)表格和分頁條。如下代碼即可將表格渲染到頁面上。

至此，一個簡單的 jqGrid 實例就完成了。如果需要更多功能的話，可以查看 jqGrid 官網(wǎng)的文檔和示例，了解如何實現(xiàn)頁碼跳轉(zhuǎn)、搜索等功能。