用flexigrid实现分页显示一

最新推荐文章于 2024-03-09 15:44:14 发布

原创

最新推荐文章于 2024-03-09 15:44:14 发布 · 7.5k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何利用flexigrid与REST API结合，实现在页面端的分页显示数据。JavaScript业务代码负责调用REST API获取数据并操纵flexigrid。REST API接收查询条件、pageSize和pageIndex作为参数，返回相应页面数据的JSON格式，同时包含最大记录数和页面数。JavaScript部分主要任务是将数据转换为flexigrid所需格式，并处理分页栏的事件绑定。

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

基本思路：

1. flexigird只在页面端显示数据，仅此而已

2. JavaScript业务代码负责调用REST API获得数据，然后操纵flexigrid显示数据。

特别是负责操控page bar，也就是flexigrid表格下方的哪个页面导航条进行中/英文支持，每个按钮的点击事件等。

3. REST API无状态，因此通过接收一些参数来计算返回的数据：

a. 查询条件 //根据不同的业务有所变化

b. pageSize //每页记录数目

c. pageIndex //期望返回的页面编号

返回的结果包括了：

a. 某页数据的JSON格式表示

b. 查询条件

c. 最大记录数

d. 最大页面数

先看个最后完成的效果图：

下面分步骤简述：

1. REST API的实现

REST API由于不记录状态，每次都是通过参数来得知要获取什么页面的数据。这个算法很多，有基于数据库自己提供的功能的，有纯粹在内存中计算的，我用的是先查询符合条件的记录总数，再分页，然后读取指定页的记录。

这到不是重点，关键是返回的数据格式JSON不按照flexigrid的要求，而是根据业务要求生成。之后页面端会有JavaScript代码将其转换成flexigrid格式。REST API返回的格式举例如下面的结果：

{
"sign_page":{
"max_sign_count":50,
"page_index":1,
"group_id":"",
"max_page_count":4,
"signs":{
"displays":[
{
"index":"0",
"value":{
"id":"51fe01dbe4b0f241088d3b4e",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000001",
"groupName":"ok67",
"location":"function test",
"description":"",
"status":"offline"
}
},
{
"index":"1",
"value":{
"id":"51fe01dbe4b0f241088d3b4f",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000002",
"groupName":"ok67",
"location":"function test",
"description":"",
"status":"offline"
}
},
{
"index":"2",
"value":{
"id":"51fe01dbe4b0f241088d3b50",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000003",
"groupName":"ok67",
"location":"function test",
"description":"",
"status":"offline"
}
},
{
"index":"3",
"value":{
"id":"51fe01dbe4b0f241088d3b51",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000004",
"groupName":"ok67",
"location":"function test",
"description":"",
"status":"offline"
}
},
{
"index":"4",
"value":{
"id":"51fe01dbe4b0f241088d3b52",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000005",
"groupName":"ok67",
"location":"function test",
"description":"",
"status":"offline"
}
},
{
"index":"5",
"value":{
"id":"51fe01dbe4b0f241088d3b53",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000006",
"groupName":"ok67",
"location":"function test",
"description":"",
"status":"offline"
}
},
{
"index":"6",
"value":{
"id":"51fe01dbe4b0f241088d3b54",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000007",
"groupName":"ok67",
"location":"function test",
"description":"",
"status":"offline"
}
},
{
"index":"7",
"value":{
"id":"51fe01dbe4b0f241088d3b55",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000008",
"groupName":"ok67",
"location":"function test",
"description":"",
"status":"offline"
}
},
{
"index":"8",
"value":{
"id":"51fe01dbe4b0f241088d3b56",
"userId":"4ee175ff82bc6273d0d4672f",
"address":"000000000009",