pageHelper【前端分页】🔥
描述
支持前端自己分页,根据传入页码、页码大小自动返回所需的列表
# 1.示例
import { pageHelper } from 'sf-utils2'
const list = [
{ date: '2017-06-05', value: 1 },
{ date: '2017-06-06', value: 2 },
{ date: '2017-06-07', value: 3 },
{ date: '2017-06-08', value: 4 },
{ date: '2017-06-09', value: 5 },
{ date: '2017-06-10', value: 6 },
{ date: '2017-06-11', value: 7 },
{ date: '2017-06-12', value: 8 },
{ date: '2017-06-13', value: 9 },
{ date: '2017-06-14', value: 10 },
{ date: '2017-06-15', value: 11 },
{ date: '2017-06-16', value: 12 },
{ date: '2017-06-17', value: 13 },
{ date: '2017-06-18', value: 14 },
{ date: '2017-06-19', value: 15 },
{ date: '2017-06-20', value: 16 },
{ date: '2017-06-21', value: 17 },
{ date: '2017-06-22', value: 18 },
{ date: '2017-06-23', value: 19 },
{ date: '2017-06-24', value: 20 },
{ date: '2017-06-25', value: 21 },
{ date: '2017-06-26', value: 22 },
{ date: '2017-06-27', value: 23 },
{ date: '2017-06-29', value: 24 },
{ date: '2017-06-30', value: 25 }
]
// 第一页,每页8条数据
pageHelper({ list: list, page: 1, size: 8 })
// 第二页,每页8条数据
pageHelper({ list: list, page: 2, size: 8 })
// 第三页,每页8条数据
pageHelper({ list: list, page: 3, size: 8 })
// 第二页,每页10条数据
pageHelper({ list: list, page: 2, size: 10 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# 2.入参说明
| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| list | 原数据集合 | Array | 是 | |
| page | 当前页码 | Number | 是 | 1 |
| size | 每页大小 | Number | 是 |
# 3.源码
/**
* 前端自己分页
* @param list 集合
* @param page 当前页
* @param size 当前页大小
* @returns {{total: *, list: *, currentPage: *, currentSize: *}}
*/
function pageHelper({ list = [], page = 1, size }) {
const tempList = list.slice(size * (page - 1), size * page)
return {
list: tempList,
total: list.length,
currentPage: page,
currentSize: size
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
上次更新: 2024/01/16, 00:19:48