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%