我们正在为表使用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>