欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react.js 翻页插件实例代码

程序员文章站 2023-11-11 15:47:10
废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var page = react.createclass({ render:...

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