当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react.js 翻页插件实例代码

react.js 翻页插件实例代码

2019年03月29日  | 移动技术网IT编程  | 我要评论

废话不多说了，下面给大家分享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 翻页插件实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网