React. js flip plug-in instance code, react. js flip
I will share with you the code of the react. js flip plug-in. The specific code is as follows:
VarPage = React. createClass ({render: function () {// The intermediate code updates vartotalRows = this. props. totalRows; varlistRows = this. props. listRows; varnowPage = this. props. nowPage> 0? This. props. nowPage: 1; varfirstRow = this. props. listRows * (this. props. nowPage-1); vartotalPage = Math. ceil (totalRows/listRows); varshow_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;} varshow_count_mid = show_count/2; varpages = []; for (vari = 1; I <= show_count; I ++) {varpage = 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 (<lionClick = {this. props. onPagination. bind (this, page) }>< a >{ page} </a> </li>) ;}} else {pages. push (<liclassName = "active"> <a >{page }</a> </li>) ;}} this. pagesbutton = pages; return (this. props. totalRows> 0? (<UlclassName = "pagination"> <li> <a> Total: {this. props. totalRows} {this. props. nowPage}/{Math. ceil (this. props. totalRows/this. props. listRows)} </a> </li> <lionClick = {this. props. onPagination. bind (this, 1) }>< a> firstpage </a> </li> <lionClick = {this. props. onPagination. bind (this, this. props. nowPage = 1? 1: this. props. nowPage-1)}> <ahref = "# none"> «</a> </li> {this. pagesbutton} <lionClick = {this. props. onPagination. bind (this, this. props. nowPage = this. props. totalPage? This. props. totalPage: this. props. nowPage + 1) }> <ahref = "# none">» </a> </li> <lionClick = {this. props. onPagination. bind (this, Math. ceil (this. props. totalRows/this. props. listRows) }>< a> lastpage </a> </li> </ul>) :( <ulclassName = "pagination"> <li> <a> No data </a> </li> </ul> ));}});
The above is the react. js paging plug-in instance Code introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!