我用过https://www.npmjs.com/package/react-table lib。必须通过列的过滤器获取表的数据。过滤器如下:
...
filterable: true,
Filter: () => {
return (
<input
...
onChange={e => this.handleSearchInput(e)}
/>
);
}
handleSearchInput方法调用对服务器的请求
let params = {
filter_fields: this.state.filter,
page_size: this.state.pageSize, //here should be state of a table
page: this.state.page // e.g. **state.page** and state - should be arguments
};
Actions.getMUsers(params)...
那么如何从ReactTable组件同步page和pageSize值以在请求体中使用它
假设您在初始组件状态中有pageSize
和page
,您可以使用一些ReactTable的内置道具来处理页面大小更改和页面更改:
<ReactTable
pageSizeOptions={this.state.pageSizeOptions} //Don't need this if you don't want it
defaultPageSize={this.state.pageSize} // probably smart to have if you're using this as part of a query but not neccessary
pageSize={this.state.pageSize}
page={this.state.page}
onPageChange={page => this.setState({page: page})
onPageSizeChange={(pageSize, page) => {
this.setState({ pageSize: pageSize, page: page });
}}
...otherProps
/>
需要记住的一些重要事项是,如果要更新onPageChange
和onPageSizeChange
函数,还必须手动处理页面和pageSize道具(只需将它们设置为状态值,如上所示)
如上所示,您可以为其提供一个您想要包含的页面大小选项列表,并通过使用值初始化您的州的pageSize
变量来确定默认页面大小(如25
)