Sans plus tarder, permettez-moi de partager avec vous le code du plug-in de tournage de page réagir.js. Le code spécifique est le suivant
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> ) ); } });
Ce qui précède est le plug-in de tournage de page réactif.js. -in introduit par l'éditeur. Exemple de code du plug-in Page, j'espère que cela sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois
Pour plus d'articles liés à la page React.js tournant un exemple de code de plug-in, veuillez faire attention au site Web PHP chinois !