ReactStrap 分页元素超出可用宽度

Question

我在 Card 元素中呈现了一个分页元素：

这是代码：

 <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
        <TablePagination
          pagesCount={this.props.pagesCount}
          currentPage={this.state.currentPage}
          handlePageClick={this.handlePageClick}
          handlePreviousClick={this.handlePreviousClick}
          handleNextClick={this.handleNextClick}
        />
      </Col>
    </Card>

这是 TablePagination React 功能组件：

import React, { Component } from "react";
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

import PropTypes from "prop-types";
/** I used object destructuring of the props object, to pass down the properties as variables. This improves readability by getting rid of props. */
const TablePagination = ({
  pagesCount,
  currentPage,
  handlePageClick,
  handlePreviousClick,
  handleNextClick,
}) => {
  return (
    /**The reactstrap Pagination component encapsulates the reactstrap PaginationItem which in turn encapsulates reactstrap PaginationLink. */
    /**The first PaginationItem inside the Pagination is the previous button. This is disabled when the current page is zero or less
     *  than zero “disabled={currentPage <= 0}”. */
    <div>
      <Pagination size="sm">
        <PaginationItem disabled={currentPage <= 0}>
          <PaginationLink onClick={handlePreviousClick} previous href="#" />
        </PaginationItem>
        {/* The next PaginationItem after the previous PaginationItem button is the dynamic PaginationItem. This is the one that generates the page number buttons. */}
        {/* “Array(pagesCount)”: creates and initializes a new array object of length equal to pagesCount. */}
        {/* “[…Array(pagesCount)].map( fn)”: using the spread operator I expand the array. After expanding, the map() method then creates a new array of PaginationItems. */}

        {[...Array(pagesCount)].map((page, i) => (
          <PaginationItem active={i === currentPage} key={i}>
            <PaginationLink onClick={(e) => handlePageClick(e, i)} href="#">
              {i + 1}
            </PaginationLink>
          </PaginationItem>
        ))}

        <PaginationItem disabled={currentPage >= pagesCount - 1}>
          <PaginationLink onClick={handleNextClick} next href="#" />
        </PaginationItem>
      </Pagination>
    </div>
  );
};

TablePagination.propTypes = {
  //pageCount: the total number of records in our dataset.
  pagesCount: PropTypes.number.isRequired,
  //currentPage: the current page navigated to
  currentPage: PropTypes.number.isRequired,
  /**handlePageClick: a function that handles the click event when a page number is clicked.
   * This function will pass the current page number which will be saved in state. */
  handlePageClick: PropTypes.func.isRequired,
  /**handlePreviousClick: a function that handles the click event when the previous button is clicked. This enables navigating to the previous(<<) page. */
  handlePreviousClick: PropTypes.func.isRequired,
  /**handleNextClick: a function that handles the click event when the next (>>) button is clicked. This enables navigating to the next page. */
  handleNextClick: PropTypes.func.isRequired,
};
export default TablePagination;

我在 documentation 中搜索过，我找不到一种方法可以让分页数字在下一行呈现，以防它们超过宽度限制。

Answer 1

您可以为“.pagination”元素添加样式规则

flex-wrap: wrap;

但它有几行看起来有点糟糕。我认为最好对超出的页面使用点，例如MaterialUI pagination

Answer 2

我遇到了同样的问题，我想让它对用户更友好。所以我想显示 10 个分页链接并动态更改起始页和结束页，就像在 google 页面结果分页中一样。

let pageLimit = 10; // number of page links in pagination
let start = 0; // starting page
let end = pageLimit; // ending page

if (pagesCount <= pageLimit) {
  pageLimit = pagesCount;
}

// increment start page when current page is greater than 5
if (currentPage - 5 >= 0) {
  start = currentPage - 4;
}

// if reaching end of pagination stop increment 
if (start + pageLimit >= pagesCount) {
  start = pagesCount - pageLimit;
}

// increment end page when current + 5 exceeds page limit
if (currentPage + 5 >= pageLimit) {
  end = currentPage + 6;
  pageLimit = end;
  if (pagesCount <= pageLimit) {
    pageLimit = pagesCount;
  }
}

这些数字可能与您的数据集不同。然后在起点和终点之间渲染PaginationItem

{[...Array(pageLimit)].map((page, i) => {
  if (i >= start && i < end) {
    return (
      <PaginationItem active={i === currentPage} key={i}>
        <PaginationLink onClick={e => handleClick(e, i)} href="#">
          {i + 1}
        </PaginationLink>
      </PaginationItem>
     );
  }
})}

ReactStrap 分页元素超出可用宽度

ReactStrap pagination element exceeds available width

html

css

twitter-bootstrap

reactjs

reactstrap