Next.js 分页组件

Posted 2021-10-22 lhp2012

import React from ‘react‘;
import ‘./NxPagination.less‘;


export default class NxPagination extends React.Component {


    renderRange(startNo, endNo, foo) {
        var result = [];
        for (var i = startNo; i <= endNo; i++) {
            result.push(foo(i));
        }
        return result;
    }

    renderItem = (pno, text, pageNo) => {
        var {itemRender} = this.props;
        if (itemRender) {
            return itemRender(pno, text, pageNo);
        }

        if (pno === pageNo) {
            return <span>{text}</span>
        }
        return <a href={‘?pn=‘ + pno}>{text}</a>
    };

    render() {
        var that = this;
        var linkcount = 8;
        var {total, pageSize, pageNo, itemRender} = this.props;
        if (pageSize <= 0) {
            pageSize = 1;
        }

        var pageCount = parseInt(total / pageSize, 10);
        if (total % pageSize > 0) {
            pageCount = pageCount + 1;
        }

        if (pageCount < 1) {
            pageCount = 1;
        }


        var startNo = 1;
        var endNo = 10;

        if (pageCount <= linkcount) {
            startNo = 1;
            endNo = pageCount;
        }
        else {

            startNo = pageNo - parseInt(linkcount / 2, 10);
            if (startNo <= 1) {
                startNo = 1;
            }

            endNo = startNo + linkcount - 1;
            if (endNo >= pageCount) {
                endNo = pageCount;
            }
        }


        return (
            <div className=‘NxPagination‘>
                <div className={‘firstPn pagelinkitem‘}>{that.renderItem(1, ‘first‘, pageNo)}</div>
                <div className=‘NxPaginationUl‘>
                    {that.renderRange(startNo, endNo, function (pn) {
                        if (pageNo === pn) {
                            return <div
                                className={‘pagelinkitem pagelinkitemcurrent‘}>{that.renderItem(pn, pn, pageNo)}</div>;
                        }
                        return <div className={‘pagelinkitem‘}>{that.renderItem(pn, pn, pageNo)}</div>;
                    })}
                </div>
                <div className={‘lastPn pagelinkitem‘}>{that.renderItem(1, ‘last‘, pageNo)}</div>
                <div className={‘pageCount‘}>共{pageCount}页</div>
                <div className={‘total‘}>共{total}项</div>
                <div className={‘clearfloat‘}></div>
            </div>
        )
    }

}

　　

 

 

 

.NxPagination {
  * {
    box-sizing: border-box;
    font-size: 12px;
  }

  div {
    float: left;
  }

  div.clearfloat {
    clear: both;
    float: none;
  }

  .pagelinkitem {
    font-weight: 500;
    background: transparent;
    border: 1px solid #d9d9d9;
    text-align: center;
    line-height: 32px;
    min-width: 32px;
    padding: 0 5px;
    margin-right: 8px;
    border-radius: 4px;
  }

  .pagelinkitemcurrent {
    border-color: #379c5d;
  }

  a {
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }

  span {
    color: #379c5d;
    cursor: default;
  }

  .pageCount, .total {
    line-height: 32px;
    margin-right: 8px;
  }
}