jqGrid在请求前触发的事件和点击翻页时判断点击了上一页还是下一页

本文介绍如何使用 jQuery 插件 jqGrid 动态更新表格数据加载的 URL 和每页显示的最大记录数。通过 beforeRequest 和 onPaging 事件,可以实现在用户翻页时调整请求参数,以展示不同数量的数据项。
beforeRequest: function() {
          alert(jQuery("#booklist").getGridParam("url"));
          alert($("#pagecurmaxnum").val());
           var newurl= "bookmarkList.do?pagecurmaxnum="+$("#pagecurmaxnum").val();
          jQuery("#booklist").jqGrid("setGridParam", {url:newurl});
          alert(jQuery("#booklist").getGridParam("url"));
       },
onPaging: function(pgButton) {     //当点击翻页按钮但还为展现数据时触发此事件,当然这跳转栏输入页
                              //码改变页时也同样触发此事件
          alert(pgButton);  //first_booklistpage, prev_booklistpage, next_booklistpage, 
                          //last_booklistpage

           var newurl= "bookmarkList.do?pagecurmaxnum=" + $("#pagecurmaxnum").val()+ 
                                                      "&pageicon=" + pgButton;
          jQuery("#booklist").jqGrid("setGridParam", {url:newurl});
 
 
可以通过设置 `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`,否则会显示相应的图标按钮。 最后,你可以根据需要自由调整分页控件中的文字样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值