jqgrid 分页不显示图标显示 中文上一页下一页
时间: 2023-11-07 21:54:38 浏览: 195
可以通过设置 `pgbuttons` 和 `pginput` 属性来将 jqGrid 分页控件中的图标改成文字,然后通过 `pgtext` 属性来自定义分页控件中显示的文本信息,示例代码如下:
```javascript
$("#grid").jqGrid({
// 其他配置项
pager: "#pager",
pgbuttons: false, // 隐藏图标
pginput: true, // 显示文字
pgtext: "{0} {1} {2} {3}", // 自定义文本信息
// 其他配置项
});
```
在上述代码中,我们将 `pgbuttons` 属性设置为 `false`,表示隐藏分页控件中的图标;将 `pginput` 属性设置为 `true`,表示显示分页控件中的文字。然后,我们通过 `pgtext` 属性来自定义分页控件中显示的文本信息,其中:
- `{0}` 表示上一页按钮的文字,可以设置为 "上一页"。
- `{1}` 表示当前页数和总页数的文本信息,例如 "第 1 页 / 共 10 页"。
- `{2}` 表示下一页按钮的文字,可以设置为 "下一页"。
- `{3}` 表示总记录数的文字,例如 "共 100 条记录"。
示例代码:
```javascript
$("#grid").jqGrid({
// 其他配置项
pager: "#pager",
pgbuttons: false, // 隐藏图标
pginput: true, // 显示文字
pgtext: " {0} {1} {2} {3}", // 自定义文本信息
recordtext: "共 {2} 条记录", // 自定义总记录数文本信息
// 其他配置项
}).navGrid("#pager", { edit: false, add: false, del: false, search: false });
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: "上一页",
buttonicon: "",
title: "上一页",
onClickButton: function () {
var currentPage = $("#grid").jqGrid("getGridParam", "page");
if (currentPage > 1) {
$("#grid").jqGrid("setGridParam", { page: currentPage - 1 }).trigger("reloadGrid");
}
}
});
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: "下一页",
buttonicon: "",
title: "下一页",
onClickButton: function () {
var currentPage = $("#grid").jqGrid("getGridParam", "page");
var totalPages = $("#grid").jqGrid("getGridParam", "lastpage");
if (currentPage < totalPages) {
$("#grid").jqGrid("setGridParam", { page: currentPage + 1 }).trigger("reloadGrid");
}
}
});
```
在上述代码中,我们通过 `navGrid` 方法和 `navButtonAdd` 方法来自定义分页控件中的上一页和下一页按钮。需要注意的是,如果使用 `navGrid` 方法来自定义分页控件,需要将 `edit`、`add`、`del` 和 `search` 参数设置为 `false`,否则会显示相应的图标按钮。
最后,你可以根据需要自由调整分页控件中的文字和样式。
阅读全文