Reactjs 从React引导表中禁用/删除分页编号

我想从分页中删除所有数字（1,2，…，n）。我只想显示Prev、First、Next和Last按钮

下面是使用react引导表创建的表组件

附带的代码沙盒工作示例

表组件：

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;

从“React”导入React；
从“react bootstrap table”导入{BootstrapTable，TableHeaderColumn}；
从“/products”导入{products}”；
函数表（）{
const renderShowsTotal=（开始、结束、总计）=>{
返回(

从{start}到{to}，totals是{total}（它是
自定义文本）

);
};
常量选项={
sizePerPageList：[
{
案文：“5”，
价值：5
},
{
案文：“10”，
数值：10
},
{
文本：“全部”，
价值：产品长度
}
],
sizePerPage:10，//默认情况下，您希望查找的每页大小是多少
//pageStartIndex:0，//从何处开始计算页面
//分页大小：3，//分页栏大小。
前置页：“Prev”//上一页按钮文本
下一页：“下一页”//下一页按钮文本
首页：“首页”，//首页按钮文本
lastPage:“Last”，//最后一页按钮文本
分页howstotal:renderShowsTotal（），//接受bool或函数
paginationPosition:“bottom”//默认值为bottom，top，两者都可用
hideSizePerPage:true，//您可以隐藏sizePerPage的下拉列表
alwaysShowAllBtns:true//始终显示下一个和上一个按钮
//withFirstAndLast:false//隐藏转到第一页和最后一页按钮
};
返回(
使用分页对引导表进行反应
产品ID
品名
产品价格
);
}
导出默认表；

---

提前感谢。

您可以在这里使用此技巧

在选项中添加

paginationSize

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

然后应用

CSS

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

---

嗨，卡比尔，请检查我的解决方案，如果有帮助，请告诉我。它有效。非常感谢Ravi的精彩表演。接下来如何在react引导程序中使用分页显示“第10f 3页”