Fork me on GitHub

分页器生成工具函数

本文介绍如何使用 es5 高阶函数实现分页函数,可直接应用于实际项目中。

实现代码

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
export const paging = (
origin ,
{
currentPage,
pageSize
} = {
currentPage: 0,
pageSize: 0,
},
condition
) => {

origin = !origin ? [] : origin

let start_index = ( currentPage - 1 ) * pageSize,
end_index = start_index + pageSize,
originTotal = origin.length, // origin total data
data = [],
total = 0,
isAllConditionNull = !condition || condition.every( v => v.value === '' || v.value === null ); // 是否存在有效过滤条件

// get all origin data when all condition is null character string.
if ( isAllConditionNull ){
data = currentPage && pageSize ? origin.slice( start_index , end_index ) : origin
total = origin.length
} else {
// filter data
const filteredArr = origin.filter(ori => {

const validMap = condition.reduce((o, v) => {
o[v.key] = true
return o
}, {})

for (let k in validMap) {
if (validMap.hasOwnProperty(k)) {
const curr = condition.find(v => v.key === k ) // 某条件信息对象

/* 匹配方式 S */
if (curr.daterange) { // 1.日期范围
const start = +new Date( curr.value ? curr.value[0] : 0 )
const end = +new Date( curr.value ? curr.value[1] : 0 )
const now = +new Date( ori[k] )

validMap[k] = (start <= now && end >= now) || !start
} else if (curr.validHandler) { // 2.自定义校验
validMap[k] = curr.validHandler(curr.value, ori[k])
} else { // 3.模糊、全匹配
validMap[k] = (curr.fuzzy ? ori[k].search( curr.value ) !== -1 : ori[k] == curr.value) || curr.value == ''
}
/* 匹配方式 E */
}
}

for ( let k in validMap ) if( !validMap[k] ) return false

return true
})

// pagination data from condition filter
data = currentPage && pageSize ? filteredArr.slice( start_index , end_index ) : filteredArr
// pagination total data
total = filteredArr.length
}

return {
total,
originTotal,
data,
currentPage,
pageSize,
}


}

参数说明

condition 条件配置

该参数用来配置条件数据,数据类型:[Array of Object]

单个键配置实例:

1
2
3
4
5
6
7
{
key: String, // 关键字,String 类型
value: Any, // 该关键字的值 Any 类型
fuzzy: Boolean, // 是否对该字段进行模糊匹配,Boolean 类型
daterange: Boolean, // 该字段是否为日期范围匹配,Boolean 类型,当该值为 true 时,value 需为 Array 类型
validHandler: Function // 自定义的匹配函数
}

注意:
validHandler 的第一个参数为当前 condition.value,第二个参数的值为当前遍历源数据所取值,即 origin[i][condition.key]
返回值为 true 时表示该数据项被匹配,否则不被匹配。

origin [Array of Object] 源数据

该参数表示需要进行分页的源数据。注意该源数据数组中的每一项都必须包含 condition 参数所需的 key 属性。

pagination [Object] 分页参数

分页配置,可控制从第几页 currentPage 开始获取数据以及每页抓取的数据条数 pageSize

1
2
3
4
{
currentPage: 0,
pageSize: 0
}

returns [Object]

返回经过条件筛选出的新数据。

1
2
3
4
5
6
7
{
data: Array of Object, // 当前页数据
originTotal: Number, // 源数据总条数
total: Number, // 分页数据总条数
currentPage: Number, // 当前页码
pageSize: Number // 每页条数
}

使用

假设我们有如下的数据需要进行分页过滤。

1
2
3
4
5
6
7
8
const originArr = [
{ name: 'a' , age: 18 },
{ name: 'b' , age: 18 },
{ name: 'c' , age: 17 },
{ name: 'd' , age: 18 },
{ name: 'e' , age: 19 }
/* ... */
]

使用 paging 函数进行分页抓取源数据。

1
2
3
4
5
6
7
8
9
10
let pagingArr = paging( 
originArr, {currentPage: 1, pageSize: 2},
[{
key: 'name',
value: 'c'
}]
)

console.log( pagingArr )
// [{ name: 'c' , age: 17 }]

如果需要加入多个条件进行匹配,向 condition 参数添加其他要限制的过滤条件配置即可。

0%