React-Table :自定义分页设计

Question

我在我的反应表中创建了自定义分页，我添加了您可以在下面的描述中看到的页码现在我想在每个页码之后添加正斜杠我尝试了一些东西，但它看起来与我的需要非常不同..所以给出适当的方法来做到这一点 感谢您提前提供帮助

我试过的代码如下所示

[![import React from "react";
import './Pagination.css'

type IProps = {
    pages: number,
    page: number,
    PageButtonComponent: any,
    onPageChange: any,
    previousText: string,
    nextText: string,
    onPageSizeChange: any;
    pageSizeOptions: any;
    data: any;
    showPageSizeOptions:any;
    rowsText:string;
    pageSize:number
}

type IState = {
    visiblePages: any
}

const defaultButton = (props: any) => <button {...props}>{props.children}</button>;

export default class Pagination extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);

        this.changePage = this.changePage.bind(this);

        this.state = {
            visiblePages: this.getVisiblePages(0, props.pages)
        };
    }

    componentWillReceiveProps(nextProps: Readonly<IProps>): void {

        if (this.props.pages !== nextProps.pages) {
            this.setState({
                visiblePages: this.getVisiblePages(0, nextProps.pages)
            });
        }

        this.changePage(nextProps.page + 1);
    }

    filterPages = (visiblePages: any, totalPages: number) => {

        return visiblePages.filter((page: number) => page <= totalPages);
    };

    getVisiblePages = (page: number, total: number) => {

        if (total < 7) {
            return this.filterPages(\[1, 2, 3, 4, 5, 6\], total);
        } else {
            if (page % 5 >= 0 && page > 4 && page + 2 < total) {
                return \[1, page - 1, page, page + 1, total\];
            } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
                return \[1, total - 3, total - 2, total - 1, total\];
            } else {
                return \[1, 2, 3, 4, 5, total\];
            }
        }
    };

    changePage(page: any) {

        const activePage = this.props.page + 1;

        if (page === activePage) {
            return;
        }

        const visiblePages = this.getVisiblePages(page, this.props.pages);

        this.setState({
            visiblePages: this.filterPages(visiblePages, this.props.pages)
        });
        this.props.onPageChange(page - 1);

    }

    render() {

        const { PageButtonComponent = defaultButton } = this.props;
        const { visiblePages } = this.state;
        const activePage = this.props.page + 1;

        return (
            <div className="row">
                <div className='col-md-4 leftpagination'>
                    <span className={"totalText"}>{"Total  " + this.props.data.length}</span> &nbsp; &nbsp;
                    {this.props.showPageSizeOptions &&
                        <span className="select-wrap -pageSizeOptions">
                            <select
                                onChange={e => this.props.onPageSizeChange(Number(e.target.value))}
                                value={this.props.pageSize}
                            >
                                {this.props.pageSizeOptions.map((option:number, i:number) => (
                                    <option key={i} value={option}>
                                        {option} {this.props.rowsText}
                                    </option>
                                ))}
                            </select>
                        </span>}
                </div>
                <div className='col-md-8'>
                    <div className="Table__pagination">
                        <div className="Table__prevPageWrapper">
                            <PageButtonComponent
                                className="Table__pageButton"
                                onClick={() => {
                                    if (activePage === 1) return;
                                    this.changePage(activePage - 1);
                                }}
                                disabled={activePage === 1}
                            >
                                {this.props.previousText}
                            </PageButtonComponent>
                        </div>
                        <div className="Table__visiblePagesWrapper">
                            {visiblePages.map((page: number, index: number, array: \[\]) => {
                                return (
                                    <PageButtonComponent
                                        key={page}
                                        className={
                                            activePage === page
                                                ? "Table__pageButton Table__pageButton--active"
                                                : "Table__pageButton"
                                        }
                                        onClick={this.changePage.bind(null, page)}
                                    >
                                        {array\[index - 1\] + 2 < page ? `...${page}` : + page}
                                    </PageButtonComponent>
                                );
                            })}
                        </div>
                        <div className="Table__nextPageWrapper">
                            <PageButtonComponent
                                className="Table__pageButton"
                                onClick={() => {
                                    if (activePage === this.props.pages) return;
                                    this.changePage(activePage + 1);
                                }}
                                disabled={activePage === this.props.pages}
                            >
                                {this.props.nextText}
                            </PageButtonComponent>
                        </div>
                    </div>
                </div>

            </div>

        );
    }
}][1]][1]

我希望页面看起来像 但是当我尝试它看起来像 1 /2 /3 ...>

Answer 1

这里我写了简单的分页设计代码。您可以使用它。

HTML 分页

<a>1</a>
<a>2</a>
<a>3</a>

分页链接样式

<style>
  a::after {
    content: " /";
    margin: 0 5px;
  }

  a:last-child::after {
    display: none;
  }
</style>

您的分页链接如下所示

您可以根据您的网站修改设计。

希望这对你有用！