React Bootstrap Table搜索与分页的格式化及颜色修改方法问询

嘿，我来帮你搞定这两个React Bootstrap Table的需求，我之前在项目里也折腾过类似的配置，给你分享下具体的实现方式：

搜索功能格式化 #

React Bootstrap Table（这里以常用的v2版本为例）支持通过自定义组件或配置参数来调整搜索框的样式和行为。如果你想让搜索框更贴合你的UI风格，可以这么做：

• 自定义搜索输入组件：
  你可以自己写一个搜索输入组件，然后通过searchProps传递给表格，比如添加自定义容器、修改占位符或者样式：

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

// 自定义搜索输入组件
const CustomSearchInput = (props) => (
  <div className="d-flex align-items-center gap-2 mb-3">
    <span className="text-muted">搜索：</span>
    <input
      {...props}
      placeholder="输入关键词查找..."
      className="form-control rounded-pill"
      style={{ width: '280px' }}
    />
  </div>
);

// 在表格中使用自定义搜索组件
<BootstrapTable
  data={yourDataSource}
  search // 开启搜索功能
  searchProps={{ searchForm: CustomSearchInput }}
>
  <TableHeaderColumn dataField="id" isKey>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="username" dataSort>用户名</TableHeaderColumn>
  <TableHeaderColumn dataField="email">邮箱</TableHeaderColumn>
</BootstrapTable>

分页功能格式化 #

分页的自定义空间更大，你可以调整页码显示数量、添加跳转框、修改按钮文本，甚至自定义整个分页组件：

<BootstrapTable
  data={yourDataSource}
  pagination // 开启分页
  paginationProps={{
    page: 1, // 默认页码
    sizePerPage: 10, // 默认每页条数
    paginationSize: 5, // 显示的页码按钮数量
    // 自定义分页按钮文本
    firstPageText: '首页',
    prePageText: '←',
    nextPageText: '→',
    lastPageText: '末页',
    // 开启页码跳转输入框
    showPageJump: true,
    // 开启每页条数选择器
    showSizePerPage: true,
    sizePerPageList: [
      { text: '10条/页', value: 10 },
      { text: '20条/页', value: 20 },
      { text: '50条/页', value: 50 }
    ],
    // 给分页组件添加自定义类名，方便后续样式修改
    paginationClass: 'custom-pagination'
  }}
>
  {/* 列配置 */}
</BootstrapTable>

修改颜色主要有两种方式：CSS覆盖默认样式或者利用Bootstrap的上下文类，看你更习惯哪种：

方式一：CSS自定义样式 #

直接给对应的组件类名写CSS，覆盖默认样式：

/* 搜索输入框样式 */
.custom-search-input {
  border-color: #6c757d;
  color: #212529;
}
.custom-search-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
  border-color: #6c757d;
}

/* 分页按钮样式 */
.custom-pagination .btn {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
.custom-pagination .btn:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.custom-pagination .btn.active {
  background-color: #0a53be;
  border-color: #0a53be;
}

/* 分页条数选择器样式 */
.custom-pagination .form-control {
  border-color: #0d6efd;
  color: #212529;
}

方式二：利用Bootstrap上下文类 #

React Bootstrap Table支持直接传递Bootstrap的按钮类名，快速修改颜色：

<BootstrapTable
  data={yourDataSource}
  search
  pagination
  // 修改搜索按钮颜色（如果有）
  searchProps={{ btnContextual: 'btn-outline-secondary' }}
  // 修改分页按钮颜色
  paginationProps={{ btnContextual: 'btn-primary', btnSize: 'sm' }}
>
  {/* 列配置 */}
</BootstrapTable>

这样就能轻松调整分页和搜索组件的颜色啦～

内容的提问来源于stack exchange，提问作者usergs