react-pagination-ht

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!