easyui datagrid 分页按钮,点击下一页,直接调转到最后一页

本文介绍了一种在Datagrid操作中保持用户当前页面的方法。当用户查看或编辑某页的数据后返回,Datagrid应停留在同一页面而非跳回首页。通过保存和恢复页面编号实现这一功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:若客户在datagrid中的中间某一页,如第三页,第四页等,查看该条或修改该条数据后,点击返回按钮,则需要datagrid仍在当前页,而不是重新加载datagrid,又变成第一页。

方法:当点击某一页的某条数据时,需要将当前页的pagenumber取出,保存,当点击返回按钮,则将pagenumber设置到datagrid的属性中。

问题:如标题所述。

解决办法:datagrid的pagenumber属性,默认为int类型,当返回的pagenumber的值不是int类型时,则会出现上述问题。因此需要将返回的值进行转型,

parseInt(pagenumber);

### 实现EasyUI DataGrid自定义分页 为了实现在EasyUI DataGrid中只显示上一页和下一页按钮的功能,可以按照如下方式调整配置: 在HTML部分,通过`<table>`标签创建DataGrid并启用分页功能。此操作可以通过设置`pagination="true"`来完成[^2]。 ```html <table id="userTable" title="用户列表" class="easyui-datagrid" style="width:480px;height:240px" url="/EasyuiDemo/GetUsers" pagination="true" singleSelect="true"> <thead> <tr> <th field="userId">用户ID</th> <th field="userName">用户名</th> <th field="userPassword">登录密码</th> </tr> </thead> </table> ``` 对于JavaScript部分,需要进一步定制化分页栏的行为。具体来说,在初始化DataGrid之后,定位到默认生成的分页容器,并移除不需要的控件(如首页、尾页等),保留仅有的两个链接用于导航至上一页或下一页。这通常涉及到修改分页插件内部结构或是覆盖其样式以隐藏不想要的元素[^1]。 下面是一个简单的例子展示如何利用jQuery选择器去除多余的分页选项而留下前后翻页按钮: ```javascript // 初始化完成后执行 $('#userTable').datagrid({ onLoadSuccess:function(data){ // 定位至分页工具条 var pager = $(this).datagrid('getPager'); // 移除非必要的页面控制项 $('a',pager).each(function(){ if ($(this).text() !== '<<' && $(this).text() !== '<' && $(this).text() !== '>' && $(this).text() !== '>>') { $(this).remove(); } }); } }); ``` 上述代码片段会在每次加载成功后遍历所有的分页链接,除了代表前一页('<') 和 后一页('>') 的链接外,其他都将被删除。 值得注意的是,如果希望更彻底地控制这些行为而不依赖于DOM操作,还可以考虑深入研究官方文档中的API接口以及事件机制,以便找到更适合项目需求的方法[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值