Pagination.html 2.28 KB
<ul className={"ant-pagination" + (size === "small" ? " mini" : "")}>
    {showTotal() && <li className="ant-pagination-total-text">{handleShowTotal()}</li>}
    <li className={"ant-pagination-prev" + (state.current === 1 ? " ant-pagination-disabled" : "")} onClick={this.handlePrev}>
        <button type="button" class="ant-pagination-item-link">
            <es-icon type="LeftOutlined"></es-icon>
        </button>
    </li>
    {state.pageNumList.map(function (value, key) {
        return <li key="key" className={""+getItemLinkClassName(value)} onClick={this.handleClick.bind(this, value)}>
            {(value!=='prev'&&value!=='next')&&<a>{value}</a>}
            {(value==='prev'||value==='next')&&<a className="ant-pagination-item-link">
                <div className="ant-pagination-item-container">
                    {value==="prev"&&<es-icon type="DoubleLeftOutlined" className="ant-pagination-item-link-icon"></es-icon>}
                    {value==="next"&&<es-icon type="DoubleRightOutlined" className="ant-pagination-item-link-icon"></es-icon>}
                    <span className="ant-pagination-item-ellipsis">•••</span>
                </div>
            </a>}
        </li>
    })}
    <li className={"ant-pagination-next" + (state.current === state.pageNum ? " ant-pagination-disabled" : "")} onClick={this.handleNext}>
        <button type="button" class="ant-pagination-item-link">
            <es-icon type="RightOutlined"></es-icon>
        </button>
    </li>
    <li className="ant-pagination-options">
        {showSizeChanger === 'true' && <es-select className="ant-pagination-options-size-changer" size="{{size}}" value={state.defaultPageSize} get-popup-container="getPopupContainer" on-change="handleSelectChange(value)">
            <es-select-option value="10">10 条/页</es-select-option>
            <es-select-option value="20">20 条/页</es-select-option>
            <es-select-option value="50">50 条/页</es-select-option>
            <es-select-option value="100">100 条/页</es-select-option>
        </es-select>}
        {showQuickJumper === 'true' && <div className="ant-pagination-options-quick-jumper">
            跳至<input type="text" onBlur={this.handleBlur.bind(this, $event)} onKeyPress={this.onKeyPress.bind(this, $event)}/>
        </div>}
    </li>
</ul>