0

我们正在为表使用React-bootstrap-table-2,并且在使用分页时搜索表中的数据时遇到问题,它仅搜索第一页的数据

  • 对于分页,我们使用了分页道具 pagination={ paginationFactory()}

下面提到的代码: -

import BootstrapTable from 'react-bootstrap-table-next';
    import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
    
    const { SearchBar } = Search;
    const columns = [{
      dataField: 'id',
      text: 'Product ID'
    }, {
      dataField: 'name',
      text: 'Product Name'
    }, {
      dataField: 'price',
      text: 'Product Price'
    }];
  

       const products = [
  { id: 1, name: "apple", price: 1 },
  { id: 2, name: "orange", price: 2 },
  { id: 3, name: "banana", price: 3 },
  { id: 4, name: "peach", price: 2 },
  { id: 5, name: "carrot", price: 1 },
  { id: 6, name: "grapes", price: 4 },
  { id: 7, name: "mango", price: 1 },
  { id: 8, name: "potatoe", price: 3 },
  { id: 9, name: "onion", price: 3 }
];
    
    <ToolkitProvider
      keyField="id"
      data={ products }
      columns={ columns }
      search
    >
      {
        props => (
          <div>
            <h3>Input something at below input field:</h3>
            <SearchBar { ...props.searchProps } />
            <hr />
            <BootstrapTable
              { ...props.baseProps }
              pagination={ paginationFactory()
            />
          </div>
        )
      }
    </ToolkitProvider>
4

0 回答 0