Question

我有一些分页逻辑可以正常工作，唯一的问题是我只能显示它并有固定数量的页面可供选择。现在我把它放到5页上，但是我希望它根据总记录来动态更改。.

所以可以说我有100条记录，每页限制为10条。将有10页。现在，我只能以这种方式显示它

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

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

所以看起来更像这样：

在第1页： 1 2 3 4 5下一页末页

在第5页：首页上一页3 4 5 6 7下一页末页

在第3页：首页上一页1 2 3 4 5下一页末页

我尝试了很多事情，但似乎找不到正确的解决方案。有人可以告诉我如何使用当前的代码吗？

我们将不胜感激。

链接到沙盒：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>
          </>
        );
      }
    }

Answer 1

检查是否适合您。我将renderPageNumbers更改为仅从currentPage到currentPage + 5显示。这里的5是随机的。您可以选择任何窗口。或通过道具传递它，使其更具动态感。

 renderPageNumbers = () => {
    const numberOfPages = this.findNumberOfPages();
    let pages = [];
    const {currentPage} = this.state;
    for (
       let i = currentPage; 
       (i <= currentPage + 4) && (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;
  };

指向沙盒的链接。我不知道它是否被保存。 https://codesandbox.io/s/react-typescript-b220b

想要动态处理有关分页的页码显示：ReactJS

应用组件

分页组件

1 个答案: