react.js 翻页插件实例代码


Posted in Javascript onJanuary 19, 2017

废话不多说了,下面给大家分享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 翻页插件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
JQuery触发事件例如click
Sep 11 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 #Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 #Javascript
创建一般js对象的几种方式
Jan 19 #Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 #Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 #Javascript
快速掌握jQuery插件开发
Jan 19 #Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 #Javascript
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
详解php的socket通信
2015/08/11 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
javascript中的几个运算符
2007/06/29 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python简单过滤字母和数字的方法小结
2019/01/09 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python多线程正确用法实例解析
2020/05/30 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
前台接待员岗位职责
2014/01/02 职场文书
个人委托书范本
2014/09/13 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
干部外出学习心得体会
2016/01/18 职场文书