这里有新鲜出炉的 React.JS 教程,程序狗速度看过来!
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
这篇文章主要介绍了 react.js 翻页插件实例代码的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
废话不多说了,下面给大家分享 react.js 翻页插件的代码,具体代码如下所示:
- 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>
- )
- );
- }
- });
以上所述是小编给大家介绍的 react.js 翻页插件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0617/328356.html