reactjs - 从 React Bootstrap 表中禁用/删除分页编号

Question

我想从分页中删除所有数字(1,2，...，n)。我只想显示上一个、第一个、下一个和最后一个按钮。

这是使用react-bootstrap-table创建的Table组件。

附带的代码沙箱工作示例。

codesandbox

表格组件:

import React from "react";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import { products } from "./products";

function Table() {
    const renderShowsTotal = (start, to, total) => {
        return (
            <p style={{ color: "blue" }}>
                From {start} to {to}, totals is {total}&nbsp;&nbsp;(its a
                customize text)
            </p>
        );
    };
    const options = {
        sizePerPageList: [
            {
                text: "5",
                value: 5
            },
            {
                text: "10",
                value: 10
            },
            {
                text: "All",
                value: products.length
            }
        ],
        sizePerPage: 10, // which size per page you want to locate as default
        // pageStartIndex: 0, // where to start counting the pages
        // paginationSize: 3,  // the pagination bar size.
        prePage: "Prev", // Previous page button text
        nextPage: "Next", // Next page button text
        firstPage: "First", // First page button text
        lastPage: "Last", // Last page button text
        paginationShowsTotal: renderShowsTotal(), // Accept bool or function
        paginationPosition: "bottom", // default is bottom, top and both is all available
        hideSizePerPage: true, // You can hide the dropdown for sizePerPage
        alwaysShowAllBtns: true // Always show next and previous button
        // withFirstAndLast: false // Hide the going to First and Last page button
    };
    return (
        <div className="react-bootstrap-table container mt-4">
            <h2>React Bootstrap Table with pagination</h2>
            <BootstrapTable data={products} pagination options={options}>
                <TableHeaderColumn dataField="id" isKey={true}>
                    Product ID
                </TableHeaderColumn>
                <TableHeaderColumn dataField="name">
                    Product Name
                </TableHeaderColumn>
                <TableHeaderColumn dataField="price">
                    Product Price
                </TableHeaderColumn>
            </BootstrapTable>
        </div>
    );
}

export default Table;

提前致谢。

Answer 1

您可以在此处应用此技巧。

将paginationSize添加到您的选项

const options = {
  ...
  paginationSize : 1,
  ...
}

然后应用CSS，

.page-item.active {
  display: none;
}

Demo