[Ext JS Grid] 后端数据分页Store Grid

最新推荐文章于 2025-04-26 21:59:16 发布

oscar999

最新推荐文章于 2025-04-26 21:59:16 发布

阅读量574

点赞数

分类专栏： Ext JS开发大全文章标签： javascript Ext JS Grid 分页 JSON

本文链接：https://blog.youkuaiyun.com/oscar999/article/details/128764571

版权

Ext JS开发大全专栏收录该内容

189 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了如何在Ext JS Grid中实现后端数据分页，讲解了分页查询时附加的page、start和limit参数的含义，并展示了Spring Boot后端接口的实现。在前端，当添加pagingtoolbar后，Grid与Store自动完成分页绑定。后端需返回total属性以计算总页数。文中提供了前后端完整代码示例。

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

Ext JS 提供了一个分页工具栏组件-pagingtoolbar，这个可以添加到Grid 中，通过点击上一页/下一页按钮进行数据的分页查询。
如果使用的是ajax 类型的代理的 Store, 数据从后端获取，则在分页查询时，会额外附加page、start和limit 三个参数，这三个参数的意思是：

page ，当前页
start ，数据开始的下标
limit ，一次取出的数据量
在后端数据接口中，根据这三个参数，返回对应页数的数据。

后端数据分页Grid 定义

数据从后端读取时，添加pagingtoolbar 之后，分页的工具栏和Store数据就自动绑定了。
这里先基于Spring Boot定义一个后端的数据接口，接收 page、start和limit 三个参数，代码类似：

	@GetMapping(value="/users" ,produces="application/json")
	@CrossOrigin(origins = "*")
	public Map<String, Object> listUser(@RequestParam(required = false) int page,
			&

了解本专栏