我的react组件化开发道路(二) 分页 组件开发
我的react组件化开发道路(二) 分页 组件开发
梅气灶 发表于1年前
我的react组件化开发道路(二) 分页 组件开发
  • 发表于 1年前
  • 阅读 1677
  • 收藏 57
  • 点赞 5
  • 评论 4

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 上一篇文章主要写了关于react组件化开发的一些基本配置,慢慢的深入到每个组件的详细介绍中,今天我们就来分享react的分页组件

        上一篇文章主要写了关于react组件化开发的一些基本配置,慢慢的深入到每个组件的详细介绍中,今天我们就来分享react的分页组件

        组件基本数据

                    

                    current:当前页码,默认是第一个

                    pageSize:每页显示的页数,默认是10页

                    pagesLength:(很重要)这个参数的主要作用是用于控制分页的按钮个数,默认是9页,当数据小于90条(因为每页是10条数据,则页数小于9页),则所有的页码直接显示,如图:

                        

        如果大于9页,则采用显示部分的形式,如图显示:

                        

        下面来具体介绍内部逻辑。

        调用函数初始化

                    

        在构造函数里面初始化基本调用的函数,主要有:上一页、下一页、点击页码直接跳转、前五页、后五页,基本调用函数介绍完,则要开始着手分页的显示逻辑了。

                

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

        

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

        1:左边没有省略号,如图:

                

        2:右边没有省略号,如图:

                

        3:两边都有省略号,如图:

                

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

let offset = (self.state.pagesLength-1)/2;

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

RenderHtml.push(<li key='pre' className={self.state.current == 1?'M-pagination-prev M-pagination-disabled':'M-pagination-prev'} onClick={self._prePage}><MIcon type="arrowleft"/></li>)

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

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

            

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

        再来判断右边没有省略号的情况:

        

        

else if(self.state.current > totalPage - offset)

如果当前页大于8(总页数减去中心偏移量得到为8),则右边没有省略号,操作跟左边没有省略号大同小异,

        剩下的就是两边都有省略号的情况:

           

    两边都有省略号的情况,两边的省略号必定第一个页码和最后一个页码相连,剩下的我们则需要计算中间显示多少页码,这个时候 pagesLength起到了关键的作用,通过两个for循环,将当前页左右两边显示对等的页码个数。然后返回给 RenderHtml 这个数组,最后:

            

    调用函数

       上一页:

                    

    判断当前页是否为第一个,如果是,则直接return不做任何操作,如果不是,则将current-1,setState,重新render

      下一页:

                    

        这里需要计算下总页数是多少,然后判断当前页是否等于总页数,如果是,则直接return不做任何操作,如果不是,则将current+1,setState,重新render

      点击页码直接跳转:

                    

            将传入的索引值直接替换掉当前的current值。

      点击左边的省略号跳转前五页:

                    

            判断当前的页码是否大于5,如果是,则将current-5,如果不是,则将当前页码设置成第三页。

      点击右边的省略号跳转后五页:

                  

            判断当前页码距离最后一页是否大于5,如果是,则将current+5,如果不是,则将当前页设置total-2(这里的total值是在bind的时候传入的totalPage);

        调用组件:

            

<MPagination total="109">

    

        目前不够完善的地方:

                1:因为分页需要配合表格的显示才能发挥出最大的作用,而目前仅仅是单个分页组件,还没有配合表格数据,因此缺少回调函数,在该回调函数中会传入当前页,每页显示的数据条数,预期会在下个版本中在表格组件中完善这一功能。

                2:每页显示的数据条数应该做成一个下拉框供用户选择,目前还没有,下个版本完善。

                3:pagesLength应该可由用户控制,这样分页具体显示多少个页码,用户的掌控力更强,下个版本完善。

        结束语:

                具体代码可以查看:https://git.oschina.net/meichao/React-webpack

                另外,为什么还有那么几个小问题不这个版本就做完,要等到下个版本完善呢?为什么?因为我懒,对,我就是懒!!!!

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 30
博文 15
码字总数 20372
评论 (4)
极乐君
赞一个!:bowtie:
极乐君
https://zhuanlan.zhihu.com/p/24028788
谢谢博主的内容~
太阳黑子
不错
曾建凯
我在想,是不是将我项目里的react分页组件分享一下呢。
×
梅气灶
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: