我的react组件化开发道路(二) 分页 组件开发

_initMPagination()函数负责分页的逻辑，先处理基本数据，pageSize,current,还要计算总页数(总页数需要向上取整)，现在我们得到了：当前页码，总页数，每页大小(即每页显示数据的条数)。那么接下来需要做的处理就是判断总页数和页面显示页数的大小，如果总页数小于等于页面显示页数的大小，则直接全部显示，如图：

需要为每一个页码绑定一个唯一的key值，判断当前的页面是否等于i,给当前页码不同的样式，并且为每一个页码绑定click函数，这样点击页码的时候能获取到正确的索引值，这个相对比较简单，如果总页数大于页面显示页数的大小，则需要考虑三种情况

1：左边没有省略号，如图：

2：右边没有省略号，如图：

3：两边都有省略号，如图：

以上三种情况的区分通过中心偏移量来判断：

先在所有操作前加上上一页的按钮：

这里需要判断当前页是否为第一页，如果是，则点击按钮不可用。

所有情况都已经考虑进去，那么现在就得从代码层面去分析逻辑，先来判断左边没有省略号的情况：

计算出中心偏移量，这里得到为4，判断当前页码是否大于4，如果小于等于4，则显示前五页的页码，剩下的使用省略号代替，最后一页的页码是totalPage,同样的需要为每一个页码绑定click事件，传入正确的索引值，最后一页传入totalPage值即可，省略号跳转页数稍后再说。