Pager creation using ReactJS.net.

Question

How to create pager in reactJS using .net MVC. am trying in ReactJS.net. please help me out to do pager like below image.

Adamson

Answer 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'));

Adamson