Bootstrap Paginator分页插件与ReactJS前端框架整合，分分钟钟把分页搞定

网上有许多分页框架结合ReactJS的例子，这里我也贡献出bootstrap-Paginator结合ReactJS框架不得不说的那些事儿。
第一步创建一空白js文件，把我下面的代码复制到里面，接下来会用到这么代码

var Page = {
    dataSize :15,//每页显示的数量
    /**
     * 计算页数
     * @param pageNumber 当前选择页数
     * @param dataArray  后台获取的全部数据
     * @returns {Array}
     */
    getPageData:function(pageNumber,dataArray){
        if(InputText.nonEmpty(dataArray)){
            var dataSize = this.dataSize ;
            var maxLength = dataSize * pageNumber -1;
            var minLength = dataSize * pageNumber - dataSize;
            var pageData = [];
            for(var i = minLength; i< dataArray.length; i++){
                if(maxLength < i ){
                    break;
                }else{
                    pageData.push(dataArray[i]);
                }
            }
            return pageData;
        }
    }
}
/**
 * 字符串验证
 */
var InputText = {
    /**
     * 非空验证(没任何提示)
     * @param paramVal 传入的值
     */
    nonEmpty:function(paramVal){
        var param = $.trim(paramVal)
       if(typeof(param)=="undefined"||param == null || param.length == 0 ||param == ""){
            return false;
       }else{
           return true;
       }
    },
    /**
     * 非空验证(带提示)
     * @param paramVal 传入的值
     * @param message 提示消息
     * @returns {*}
     */
    nonEmptyMessage:function(paramVal,message){
        var result= this.nonEmpty(paramVal);
        if(result ==false){
            return message;
        }else{
            return true;
        }
    }
}

第二步就是页面html显示了，循环表格我就不写

var DataList = React.createClass({
    getInitialState: function() {
        return {
            //serviceData:this.props.data,//解决坑的代码
            serviceData:null,//从后台获取的数据或是自定义数据。
            pageNumber:1 //默认选择第一页
        };
    },
      //页面加载完成后，自会执行这个函数
     componentDidMount:function(){
        var _this = this;
        //如果你列表有条件查询你要这么写，我这里给的是例子
/*$("#btnSubmit").click(function(){
          var data = $("#each").serialize();
            //selectAchievementDataCondition这个函数的背后实现其实是ajax提交啦
          Service.selectAchievementDataCondition(data,function(result){
              _this.setState({
                  achievementView:result.message
              });
                //这里是重点
              _this.handleSetPage(result.message);
          });
      });*/
        _this.handleSetPage(_this.state.serviceData);
    },
     render:function(){
        var _this = this;
        //获取选中的页码
        var pageNumber = _this.state.pageNumber
        //选中页码要显示的数据
        var pageData =         Page.getPageData(pageNumber,_this.state.serviceData);
     //然后就是循环新获取pageData的数据，这需要有reactjs一定的基础   
       return(
                <div>
                       <ul id="firstPrev" style={{float:'left',marginTop:'-8px'}} className="pagination">
                           <li className="previous disabled"><a>首页</a></li>
                           <li className="previous disabled"><a>上一页</a></li>
                       </ul>
                       <ul style={{float:'left',marginTop:'-8px'}} className="paginations"></ul>
                       <ul id="nextLast"  style={{float:'left',marginTop:'-8px'}} className="pagination">
                           <li className="previous disabled"><a>下一页</a></li>
                           <li className="previous disabled"><a>尾页</a></li>
                       </ul>
                       <ul className="pagination pagination-lg"  style={{float:'left',marginTop:'-12px'}}><li className="disabled controls"><a href="#">当前 {this.state.pageNumber} / {Page.dataSize} 条，共 {InputText.nonEmpty(this.state.serviceData)?this.state.serviceData.length:0}条</a></li></ul>
                   </div>
        )
    },
 handleSetPage:function(dataArray) {
        var _this = this;
        var totalPages = 1;
        _this.setState({pageNumber: 1});
        if (InputText.nonEmpty(dataArray)) {
            totalPages = Math.ceil(dataArray.length / Page.dataSize)
            if (totalPages > 1) {
                $("#nextLast").hide();
            }
        }
        $('.paginations').bootstrapPaginator({
            bootstrapMajorVersion: 3,
            currentPage: 1,
            numberOfPages: 5,
            totalPages: totalPages,
            onPageClicked: function (event, originalEvent, type, page) {
                if (page == 1) {
                    $("#firstPrev").show();
                    $("#nextLast").hide();
                } else {
                    $("#firstPrev").hide();
                    $("#nextLast").hide();
                }
                if (page == totalPages) {
                    $("#nextLast").show();
                }
                _this.setState({pageNumber: page});
            }
        });
    }
});

第三步就是调用这个DataList组件了

ReactDOM.render(
            <DataList/>,
            document.getElementById("dataLIst")
        )

解决获取后台数据坑：
在第二步有段代码，需要获取后台数据，我建议大家 这样写，虽然也可以写在reactjs自带的componentDidMount函数里

$(function(){
    Service.selectAchievementData("1",function(result){
        var dataArray = result.message
        ReactDOM.render(
            <DataList data= {dataArray}/>,
            document.getElementById("dataLIst")
        )
    });
});

到此这遍文章写完了，我现在把我使用的文件放出来，大家在使用过程中发现哪些问题请及时提出，我好修改这边文章内容。
https://pan.baidu.com/s/1dFFycFZ