问题
How to create pager in reactJS using .net MVC. am trying in ReactJS.net. please help me out to do pager like below image.
回答1:
Here is a solution for only 6 page number will be displayed on the pager. more than 6 page navigation is provided for left and right. hope this one help you guys..
var GridPagerTest = React.createClass({
getInitialState : function(){
return {
startIndex : 1,
visibleNumber : 5
}
},
handleNextPageNumber : function(nextIndex)
{
this.setState({startIndex:nextIndex});
},
render : function(){
var li = [];
var pageCount = this.props.Size;
var endVisibleNumber = this.state.startIndex + this.state.visibleNumber;
var endIndex = pageCount;
if(pageCount > endVisibleNumber)
{
endIndex = endVisibleNumber;
}
for(var i = this.state.startIndex ; i<=endIndex; i++){
if(this.state.startIndex != 1 && this.state.startIndex == i)
{
li.push(<li key={i - 1}><a href="#" onClick={ ()=> this.handleNextPageNumber( (this.state.startIndex -1) - this.state.visibleNumber )}> <div className="glyphicon glyphicon-chevron-left"></div></a></li>);
}
if(this.props.currentPage == i){
li.push(<li key={i} className="active"><a href="#">{i}</a></li>);
}
else{
li.push(<li key={i}><a href="#" onClick={this.props.onPageChanged.bind(null,i)}>{i}</a></li>);
}
if(pageCount > endIndex && endIndex == i)
{
li.push(<li key={i + 1}><a href="#" onClick={ ()=> this.handleNextPageNumber(i)}><div className="glyphicon glyphicon-chevron-right"></div></a></li>);
}
}
return (<ul className="pagination">{li}</ul>);
}
});
var ShowPager=React.createClass({
pageChanged : function(pageNumber,e){
},
render : function(){
return(
<GridPagerTest Size={50} onPageChanged={this.pageChanged} currentPage={1} />
);
}
});
React.render(<ShowPager />, document.getElementById('PagingTest'));
来源:https://stackoverflow.com/questions/51982376/pager-creation-using-reactjs-net