Without further ado, let me share with you the code of the react.js page turning plug-in. The specific code is as follows:
var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this.props.listRows*(this.props.nowPage-1); var totalPage = Math.ceil(totalRows/listRows); var show_count=this.props.show_count?this.props.show_count:5; if((!totalPage)&&nowPage>totalPage) { this.props.nowPage=totalPage; } if(this.props.nowPage<1) { this.props.nowPage=1; } var show_count_mid=show_count/2; var pages = []; for(var i=1;i<=show_count;i++) { var page=0; if(nowPage<=show_count_mid) { page = i; } else if(nowPage+show_count_mid>totalPage) { page = totalPage - show_count+i; } else { page =nowPage-Math.ceil(show_count_mid)+i; } if(page>0&&page!=nowPage) { if(page<=totalPage) { pages.push(<li onClick={this.props.onPagination.bind(this,page)}><a>{page}</a></li>); } } else { pages.push(<li className="active"><a>{page}</a></li>); } } this.pagesbutton=pages; return ( this.props.totalRows>0?( <ul className="pagination"> <li><a>Total:{this.props.totalRows} {this.props.nowPage}/{Math.ceil(this.props.totalRows/this.props.listRows)}</a></li> <li onClick={this.props.onPagination.bind(this,1)}><a>firstpage</a></li> <li onClick={this.props.onPagination.bind(this,this.props.nowPage==1?1:this.props.nowPage-1)}><a href="#none">«</a></li> {this.pagesbutton} <li onClick={this.props.onPagination.bind(this,this.props.nowPage==this.props.totalPage?this.props.totalPage:this.props.nowPage+1)}> <a href="#none">»</a> </li> <li onClick={this.props.onPagination.bind(this,Math.ceil(this.props.totalRows/this.props.listRows))}><a>lastpage</a></li> </ul> ):( <ul className="pagination"> <li><a>No data</a></li> </ul> ) ); } });
The above is the react.js page turning introduced by the editor. Plug-in example code, I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!
For more articles related to the react.js page turning plug-in example code, please pay attention to the PHP Chinese website!