## react-pagination 分页组件 ##
使用（usage）:

    npm install react-pagination-ht --save;

    import ReactPagination  from "react-pagination-ht";

简介(summary):
在做后台开发的时候，分页组件绝对是很重要的一环。刚好我就遇到这么一个情况，需要对日志做个系统的管理。

现在在后台管理中常用的分页组件是easygrid.js，在vue和react大行其道的前端圈，easygrid.js...怎么说呢有点过时了。

用这个也不符合我做这个系统的初衷,于是在npm找了些用react做的分页组件,npm下来,import...

报错异常的多，而且还不符合我的业务场景。easygrid.js倒是很符合，但是你懂的，既然用react做，那就用react做，

分页组件： 自由度要高，可以控制每一列的渲染。

render方法是

分页组件配置(configuration)：


		<ReactPagination
		tHead={[
						"日志ID",
						"标题",
						"发布时间",
						"操作"
					]} 
				searchUrl="/requestUrl"
                                param={{id:this.state.id,tittle:this.state.tittle,time:this.state.time}}
				lists={[
						{type:"text",
						rowDataProp:"id"},
						{type:"text",
						rowDataProp:"tittle"},
						{type:"render",
						render:this.transformTime.bind(this)},
						{type:"render",
						render:this.generator.bind(this)}
					]}
					pagesListNum={7}
				mainCallBack={this.mainCallBack.bind(this)}/>
Props说明(usage of props)：
                           
    1.tHead:table head 标题行 

    2.searchUrl:action request address

    3.param为请求参数。

    4.lists 定制每一行的列渲染行为，这点和easygrid很相似，如果规定为render，则方法的第一个参数为rowData，你可以为所欲为。

    5.最后一个为主回调方法,第一个参数为请求的全量数据，第二个参数为分页的页数。

注意（pay attention）:
传递给服务端的两个字段为：pagesListNum，intStart。全部请求的参数为

    id:"1",//from props
    tittle:"xxx", //from props
    time:"123113", //from props
    pagesListNum:7 //from this component
    intStart:17 //from this component

最后附加在包装组件中以上两个渲染方法的实现(wrap component implements methods)：

    generator(rowData){
		return (<div style={{display:"inline-block"}}><span onClick={this.edit.bind(this,rowData.id)} className="operation-span" style={{display:"inline-block",
								backgroundColor:"",
								borderRadius:"3px",
								padding:"10px",
								paddingTop:"3px",
								paddingBottom:"3px",
								backgroundColor:"#50cf8e",
								color:"white",
								cursor:"pointer"
								}}>编辑</span>
								<span className="operation-span-delete" 
								style={{display:"inline-block",
								borderRadius:"3px",
								padding:"10px",
								paddingTop:"3px",
								paddingBottom:"3px",
								backgroundColor:"#f69581",
								marginLeft:"20px",
								color:"white",
								cursor:"pointer"
								}}
								onTouchTap={this.deleteArticleSetId.bind(this,rowData.id)}>删除</span></div>)
	}

	// transform  timestamp to normal time
	transformTime(rowData){
		return new Date(parseInt(rowData.time)).toLocaleString().replace(/:\d{1,2}$/,' ');
	}

请求的数据格式(result of the requestUrl)：
		

    {
    "count": 285,
    "resultList": [
        {
            "_id": "59358ac0daea9d0a6c1d3400",
            "id": 28,
            "tittle": "萨克的撒大黄是是是空的阿达啊哈大大",
            "value": "google",
            "time": 1496681150653,
            "updateTime": "1497792799187"
        },
        {
            "_id": "59358ac0daea9d0a6c1d342c",
            "id": 72,
            "tittle": "黄涛",
            "value": "Google ",
            "time": 1496681150713
        },
        {
            "_id": "59358ac3daea9d0a6c1d343d",
            "id": 89,
            "tittle": "黄涛",
            "value": "Google ",
            "time": 1496681150729
        },
        {
            "_id": "59358ac3daea9d0a6c1d344a",
            "id": 102,
            "tittle": "黄涛",
            "value": "Google 。",
            "time": 1496681150743
        },
        {
            "_id": "59358ac3daea9d0a6c1d344c",
            "id": 104,
            "tittle": "黄涛",
            "value": "Google 。",
            "time": 1496681150745
        },
        {
            "_id": "59358ac3daea9d0a6c1d344d",
            "id": 105,
            "tittle": "黄涛",
            "value": "验。",
            "time": 1496681150746
        },
        {
            "_id": "59358ac3daea9d0a6c1d344e",
            "id": 106,
            "tittle": "黄涛",
            "value": "Google 在新加坡组建工程中心时就曾说过：新加坡是最能给互联网带来「新的十亿用户」的国家。除了 Google、Facebook、",
            "time": 1496681150747
        }
    ]}

## that's it!