网上有许多分页框架结合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

第二步就是页面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(
                

                       


                           

                       



                           

                       
当前 {this.state.pageNumber} / {Page.dataSize} 条，共 {InputText.nonEmpty(this.state.serviceData)?this.state.serviceData.length:0}条

        )
    },
 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(
            ,
            document.getElementById("dataLIst")
        )

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

$(function(){
    Service.selectAchievementData("1",function(result){
        var dataArray = result.message
        ReactDOM.render(
            

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