wristband path info add pager

This commit is contained in:
Jay 2017-04-27 10:19:20 +08:00
parent 5e751abbdc
commit cf66e9d94e

View File

@ -13,6 +13,8 @@ const getDayTime = ()=>{
class WristbandPathInfo extends React.Component{ class WristbandPathInfo extends React.Component{
state = { state = {
list: [], list: [],
page: 1,
maxPage: 1,
stime: (getDayTime()), stime: (getDayTime()),
etime: (Date.now()) etime: (Date.now())
} }
@ -24,6 +26,8 @@ class WristbandPathInfo extends React.Component{
closeView = () => { closeView = () => {
this.setState({ this.setState({
list: [], list: [],
page: 1,
maxPage: 1,
stime: (getDayTime()), stime: (getDayTime()),
etime: (Date.now()) etime: (Date.now())
}, ()=>{ }, ()=>{
@ -41,14 +45,34 @@ class WristbandPathInfo extends React.Component{
.then(response=>response.json()) .then(response=>response.json())
.then(json => { .then(json => {
if(json.status != 1) return showDialog(json.message); if(json.status != 1) return showDialog(json.message);
let l = json.data.record || [];
this.setState({ this.setState({
list: json.data.record || [] list: l,
page: 1,
maxPage: Math.ceil(l.length / 20)
}) })
}) })
} }
nextPage = () => {
let {page, maxPage} = this.state;
this.setState({
page: page >= maxPage ? maxPage : page+1
})
}
prevPage = () => {
let {page} = this.state;
this.setState({
page: page <= 1 ? 1 : page-1
})
}
render() { render() {
let {closeModal, open} = this.props; let {closeModal, open} = this.props;
let tmpList = this.state.list.slice((this.state.page - 1) * 20, ((this.state.page - 1) * 20 + 20))
return ( return (
<Modal open={open} onClose={()=>{this.closeView()}}> <Modal open={open} onClose={()=>{this.closeView()}}>
<Modal.Header> <Modal.Header>
@ -80,9 +104,16 @@ class WristbandPathInfo extends React.Component{
</Menu.Item> </Menu.Item>
</Menu.Menu> </Menu.Menu>
</Menu> </Menu>
<div style={{textAlign: 'center'}}>
<Button content="上一頁" size="small" labelPosition="left" basic={true} color="black" icon="arrow left" onClick={() => {this.prevPage()}} />
<Label basic={true} color="blue" content={`${this.state.page || 1} / ${this.state.maxPage || 1}`} />
<Button content="下一頁" size="small" labelPosition="right" basic={true} color="black" icon="arrow right" onClick={() => {this.nextPage()}} />
</div>
<List divided> <List divided>
{ {
this.state.list.map((t,idx) => { tmpList.map((t,idx) => {
return ( return (
<List.Item key={idx}> <List.Item key={idx}>
{ {