使用 ReactJS.net 创建寻呼机。

Question

如何使用 .net MVC 在 reactJS 中创建分页器。我在 ReactJS.net 中尝试。请帮我做如下图所示的寻呼机。

Answer 1

这是一个解决方案，只有 6 个页码会显示在寻呼机上。为左右提供超过6页导航。希望这个对你们有帮助..

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