如何在React Bootstrap Table分页中设置默认选中的每页条目数

解决方法 #

直接在paginationFactory接收的options配置中新增sizePerPage字段，赋值为你存在Redux里的上次选中的每页条数即可，该参数就是用来指定分页下拉框当前选中值的。

修改后的配置示例如下：

// 从props中拿到Redux存储的上次选中的每页条数，兜底默认值设为10
const savedPageSize = this.props.savedPageSize || 10;

const options = {
      paginationSize: 3,
      showTotal: true,
      paginationTotalRenderer: customTotal,
      disablePageTitle: true,
      sizePerPage: savedPageSize, // 新增该行配置
      sizePerPageList: [{
        text: '10', value: 10
      }, {
        text: '25', value: 25
      }, {
        text: '50', value: 50
      }, {
        text: 'All', value: this.state.toggleList.length
      }],
      onSizePerPageChange: this.onPageSizeChange
    };

注意事项 #

如果你上次选中的是All选项，对应的value是this.state.toggleList.length这个动态值，需要保证toggleList在初始化options之前已经完成数据加载，否则动态值不匹配时会自动 fallback 到列表第一个值（也就是10）。如果有这种场景可以加个加载状态，等数据请求完成后再渲染BootstrapTable组件。

如果同时需要记忆上次选中的页码，也可以在options中新增page: this.props.savedPage || 1，配合onPageChange回调存储页码到Redux即可实现完整的分页状态持久化。

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