react分页和搜索(饿了吗组件使用)

export default class UserComponent extends React.Component {

constructor(props) {
super(props);

 this.state = {
columns: [
 {
type: 'selection'
 },
 {
label: "ID",
 prop: "uid",
 width: 150
 },
 {
label: "姓名",
 prop: "username",
 width: 160
 },
 {
label: "地址",
 prop: "cellphone"
 }, {
label: "操作",
 width: 120,
 fixed: 'right',
 render: (row, column, index)=>{
return <span><Button type="text" size="small" onClick={this.deleteRow.bind(this, index)}>移除</Button></span>
 }
 }


 ],
 data: [],
 list:[],
 lat_page:"",
 username:""


 }
 }
deleteRow(index) {
const { data } = this.state;
 data.splice(index, 1);
 this.setState({
data: [...data]
 })
 }
selectRow(){
fetch('https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword='+this.state.username+'&page=1&size=10')
 .then(res => res.json())
 .then(json=>{
this.setState({
data:json.data
 })

 })
 }
componentDidMount(){
fetch('https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword=&page=1&size=10')
 .then(res => res.json())
 .then(json=>{
this.setState({
data:json.data,
 lat_page:json.last_page
 })
 console.log(this.state.data)
 })
 }


render() {
return (
 <div className="student">
 <input type={"text"} placeholder={"输入关键字"} onChange={e=>{this.setState({username:e.target.value})}} />
 <button className="btn" onClick={this.selectRow.bind(this)}>搜索</button>
 <Table
style={{width: '80%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
height={660}
onSelectChange={(selection) => { console.log(selection) }}
onSelectAll={(selection) => { console.log(selection) }}
/>
 <Pagination onCurrentChange={page=>{
fetch('https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword=&page='+page+'&size=10')
 .then(res=>res.json())
 .then(json=>this.setState({data:json.data},()=>{
 console.log(this.state.data) })) }} layout="prev, pager, next" total={50} small={true}/> </div> ); }}

转载于:https://www.cnblogs.com/wzxwzxwzx/p/9541366.html