我有一些分页逻辑工作得很好，唯一的问题是我只能让它显示和固定数量的页面可供选择。现在我已经把它放到了 5 页，但我希望它根据总记录动态改变..

所以假设我有 100 条记录，每页的限制是 10 。将有 10 页。现在我只能让它以这种方式显示

第一个 上一个 1 2 3 4 5 6 7 8 9 10 下一个 最后一个

但我想要的是根据记录和您所在的页面动态更改分页。

所以它看起来更像这样：

在第 1 页：1 2 3 4 5 下一页 最后一页

第 5 页： First Prev 3 4 5 6 7 Next Last

第 3 页： First Prev 1 2 3 4 5 Next Last

我尝试了很多东西，但似乎找不到正确的解决方案。有人可以告诉我如何处理我拥有的当前代码吗？

帮助将不胜感激。

沙箱链接：https : //codesandbox.io/s/react-typescript-nvffv

应用组件

    import * as React from "react";
    import Pagination from "./Pagination";
    import * as ReactDOM from "react-dom";
    const NO_OF_RECORDS_PER_PAGE = 10;

    interface IState {
      length: number;
      currentPage: number;
    }

    interface IProps {}
    export default class App extends React.Component<IProps, IState> {
      constructor(props: any) {
        super(props);
        this.state = {
          length: 0,
          currentPage: 1
        };
      }

      componentDidMount() {
        this.setState({ length: 98 });
      }

      handlePagination = (fromIndex: number, noOfRecords: number) => {
        //Pagination logic here 
        //console.log(fromIndex, noOfRecords);
      };

      render() {
        return (
          <Pagination
            dataCount={this.state.length}
            currentPage={this.state.currentPage}
            handlePagination={this.handlePagination}
            perPageCount={NO_OF_RECORDS_PER_PAGE}
          />
        );
      }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

分页组件

    import * as React from "react";
    interface IProps {
      dataCount: number;
      handlePagination(fromIndex: number, noOfRecords: number): any;
      perPageCount: number;
    }

    interface IState {
      pages: number;
      fromIndex: number;
      currentPage: number;
    }

    export default class PaginationComponent extends React.Component<
      IProps,
      IState
    > {
      constructor(props: any) {
        super(props);
        this.state = {
          pages: this.findNumberOfPages(),
          fromIndex: 0,
          currentPage: 1
        };
      }

      componentDidUpdate(prevProps: any) {
        if (prevProps.dataCount !== this.props.dataCount) {
          this.setState({ pages: this.findNumberOfPages() });
        }
      }

      findNumberOfPages = () => {
        return Math.ceil(this.props.dataCount / this.props.perPageCount);
      };

      setOffset = (value: number) => {
        let fromIndex = this.getFromIndex(
          value,
          this.props.perPageCount,
          this.props.dataCount
        );
        this.setState({ fromIndex, currentPage: value }, () =>
          this.props.handlePagination(this.state.fromIndex, this.props.perPageCount)
        );
      };

      getFromIndex = (page_no: number, per_page: number, total_length: number) => {
        return (
          +page_no &&
          +page_no <= Math.ceil(total_length / per_page) &&
          per_page * --page_no
        );
      };

      renderPageNumbers = () => {
        const numberOfPages = this.findNumberOfPages();
        let pages = [];
        for (let i = 1; i <= numberOfPages; i++) {
          pages.push(
            <span
              key={i}
              className="margin-wd-10"
              onClick={() => this.setOffset(i)}
              style={{ cursor: "pointer" }}
            >
              {i}&nbsp;&nbsp;
            </span>
          );
        }
        return pages;
      };

      renderPrevButton = () => {
        return (
          <>
            {this.state.currentPage > 1 ? (
              <button
                style={{ cursor: "pointer" }}
                onClick={() => this.setOffset(this.state.currentPage - 1)}
              >
                &lt;
              </button>
            ) : (
              <button style={{ cursor: "pointer" }} disabled>
                &lt;
              </button>
            )}
          </>
        );
      };

      renderNextButton = () => {
        return (
          <>
            {this.state.currentPage < this.state.pages ? (
              <button
                style={{ cursor: "pointer" }}
                onClick={() => this.setOffset(this.state.currentPage + 1)}
              >
                &gt;
              </button>
            ) : (
              <button style={{ cursor: "pointer" }} disabled>
                &gt;
              </button>
            )}
          </>
        );
      };

      renderFirstButton = () => {
        return (
          <>
            {this.state.currentPage > 1 ? (
              <button
                style={{ cursor: "pointer" }}
                onClick={() => this.setOffset(1)}
              >
                First
              </button>
            ) : (
              <button style={{ cursor: "pointer" }} disabled>
                First
              </button>
            )}
          </>
        );
      };

      renderLastButton = () => {
        return (
          <>
            {this.state.currentPage < this.state.pages ? (
              <button
                style={{ cursor: "pointer" }}
                onClick={() => this.setOffset(this.state.pages)}
              >
                Last
              </button>
            ) : (
              <button style={{ cursor: "pointer" }} disabled>
                Last
              </button>
            )}
          </>
        );
      };

      render() {
        return (
          <>
            <div>
              {this.renderFirstButton()}
              &nbsp;
              {this.renderPrevButton()}
              &nbsp;
              {this.renderPageNumbers()}
              {this.renderNextButton()}
              &nbsp;
              {this.renderLastButton()}
            </div>
          </>
        );
      }
    }