React component is very convenient, very briefly achieved paging. React to Baidu, the page is very long, so I wrote, although on three lines of not real, but that is about it.
This is my Baidu to paging code to achieve: http://blog.csdn.net/xiaozhuxmen/article/details/51461269
http://www.cnblogs.com/vichily/p/6432558.html
HTTP: // the WWW. tuicool.com/articles/FB36VjN
http://blog.csdn.net/starfd/article/details/50505499
Generally speaking, their code is quite long, but the realization of ideas are not the same. The following is what I wrote it myself.
Plus a list of events click event and nearly 100 non-paged section of the line to get it.
First tab renderings:
the style is semantic to do. Is there a class to distinguish between active and non-current page Current page
First paging component Class_Foot
var Class_Foot = React.createClass({
getInitialState: function() {
return {thispage: 1,lastpage:1,active:'active item',unactive:'item',allPage:Page_Class};
},
skipPage: function(event){
var page_num=parseInt(event.target.text);
var last_pagenum=this.state.thispage;
this.setState({
lastpage:last_pagenum,
thispage:page_num,
});
PubSub.publish('Change_Page', page_num);
},
ToFirst:function(event){
var page_num=1;
var last_pagenum=this.state.thispage;
this.setState({
lastpage:last_pagenum,
thispage:page_num,
});
PubSub.publish('Change_Page', page_num);
},
ToLast:function(event){
var page_num=Page_Class;
var last_pagenum=this.state.thispage;
this.setState({
lastpage:last_pagenum,
thispage:page_num,
});
PubSub.publish('Change_Page', page_num);
},
render: function() {
var rows = [];
if(Page_Class>7)
{
var ac=this.state.active;var unac=this.state.unactive;var tp=this.state.thispage;var pc=Page_Class;var bool1=(tp<4),bool2=(tp<=(pc-3));var _tmp1=bool1?1:(bool2?-3:pc-6),_tmp2=bool1?7:(bool2?3:pc);
for(var j=_tmp1;j<=_tmp2;j++)
{
rows.push(<a key={"1_"+j} onClick={this.skipPage} className={bool1?((j==tp)?ac:unac):(bool2?((j==0)?ac:unac):((tp==j)?ac:unac))}>{bool1?j:(bool2?(tp+j):j)}</a>)
}
}else{
for(var j=1;j<=Page_Class;j++)
{
rows.push(<a key={"2_"+j} onClick={this.skipPage} className={(j==this.state.thispage)?this.state.active:this.state.unactive}>{j}</a>);
}
}
return <tfoot><tr><th colSpan='6'><div className="ui right floated pagination menu"><a onClick={this.ToFirst} data-tooltip='前往首页' data-position='bottom center' className="icon item"><i className="arrow left icon"></i></a>{rows}<a onClick={this.ToLast} data-tooltip='末页' className="icon item"><i className="arrow right icon"></i></a></div></th></tr></tfoot>;
}
});Declared five properties, thispage current page, lastpage History page, active current page style
unactive normal style, allpage total number of pages
in fact, the total number of pages attribute should be used as props
skippage and tofirst and tolast three are onClick function, corresponding to click page left arrow right arrow. click refresh the page after the assembly is to change the state refresh immediately implemented, PubSub released for the update status page components also receive messages through setState refresh method.
Why do I say paged only three lines of code it? Because the most critical paging buttons control the display of only a for loop, of course taking into account the number of pages of less than 7 will add a for the cycle.
Core code:
for(var j=_tmp1;j<=_tmp2;j++)
{
rows.push(<a key={"1_"+j} onClick={this.skipPage} className={bool1?((j==tp)?ac:unac):(bool2?((j==0)?ac:unac):((tp==j)?ac:unac))}>{bool1?j:(bool2?(tp+j):j)}</a>)
}I spent a lot of triples, wrote the first edition of the bunch if reduced to one line up.
The page components with state refresh mechanism is implemented to control the number of output data by state and key starting point for loop control, that is the number of pages.
My output data in tabular form.
var Class_All_TR=React.createClass({
getInitialState: function() {
return {page: 1};
},componentDidMount: function () {
this.pubsub_token = PubSub.subscribe('Change_Page', function (topic, page_num) {
this.setState({
page: page_num
});
}.bind(this));
},
componentWillUnmount: function () {
PubSub.unsubscribe(this.pubsub_token);
},
render: function() {
var sid="";
var rows=[]
//console.log(this.props.item);
var td_num=(this.state.page-1)*8;
for (var i = td_num; i < ((td_num+8)>Num_Class?Num_Class:(td_num+8)); i++) {
sid="_"+i;
rows.push(<Class_TR key={"TR__"+i} class_name={this.props.item[sid]["class_name"]} point={this.props.item[sid]["point"]} major={this.props.item[sid]["major"]} loc={this.props.item[sid]["loc"]} like={this.props.item[sid]["like"]} check={this.props.item[sid]["check"]} idi={i}/>);
}page property Class_All_TR control the currently displayed page.
var td_num=(this.state.page-1)*8;
for (var i = td_num; i < ((td_num+8)>Num_Class?Num_Class:(td_num+8)); i++) {This is the core code controlling the display, this is an 8 tr, i.e., 8 data.
Class_TR component is a single component of my data, because my data is displayed in the form of.
More important page component is componentDidMount function, which subscribe to the 'Change_Page' message, you can change its state assembly in Class_Foot Class_Foot components communicate with: thispage and refresh themselves when Dom elements inform Class_All_TR also update and refresh the page Dom elements.
For the use of communications and PubSubJS between components, please refer to: http://www.tuicool.com/articles/AzQzEbq
this article very comprehensively explain the interaction between components.
PS: setState function will refresh Dom element components, but does not re-update when loading assembly props incoming data, and if you want to update his props data, you need to refresh is to use the component Dom elements.