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 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
php限制ip地址范围的方法
2015/03/31 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
vue动态改变背景图片demo分享
2018/09/13 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python代码中怎么换行
2020/06/17 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
干部行政关系介绍信
2014/01/17 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
学校师德师风整改方案
2014/10/28 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书