1.页面的结构

1. //遍历list, 返回数据
2.       let listBody= this.state.list.map((user,index)=> {
3.           return (
4.            <tr key={index}>
5.              <td>{user.id}</td>
6.              <td>{user.username}</td>
7.              <td>{user.email}</td>
8.              <td>{user.phone}</td>
9.              <td>{new Date(user.createTime).toLocaleString()}</td>
10.          </tr>
11.        )
12.       });
13.       //当this.state.list.length<=0,第一次加载的时候firstLoading=true，显示"正在加载数据"
14.       //当this.state.list.length<=0,第一次加载的时候firstLoading=false，显示"正在加载数据"
15.       let listError=(
16.           <tr>
17.               <td colSpan="" className="text-center">
18.                 {this.state.firstLoading ?"正在加载数据....." : "没有找到相应的结果"}
19.               </td>
20.           </tr>
21.       )
22.       let tableBody=this.state.list.length > 0 ? listBody:listError;
23.      return (
24.         <div id="page-wrapper">
25.               <PageTitle title="用户列表"/>
26.               <div className="row">
27.                   <table className="table table-striped table-bordered">
28.                       <thead>
29.                           <tr>
30.                               <th>ID</th>
31.                               <th>用户名</th>
32.                               <th>邮箱</th>
33.                               <th>电话</th>
34.                               <th>注册时间</th>
35.                           </tr>
36.                       </thead>
37.                       <tbody>
38.                           {
39.                             tableBody
40.                           }
41.                       </tbody>
42.                   </table>
43.               </div>
44.               {/* 分页组件 */}
45.               <Pagination current={this.state.pageNum}
46.               total={this.state.total}
47.               onChange={(pageNum) => {this.onPageNumChange(pageNum)}}/>
48.         </div>
49.      );

2.用户列表接口/manage/user/list.do ，请求数据为，pageNum和pageSize, pageSize默认为10，所以只需要传入当前页pageNum就可以了

1. this.state={
2.            list:[],
3.            pageNum:1,
4.            //判断是不是第一次加载
5.            firstLoading:true
6.        }

请求后台数据

1. //当页码挂载之后请求数据
2.     componentDidMount(){
3.        this.loadUserList();
4.     }

1. loadUserList(){
2.        _user.getUserList(this.state.pageNum).then(res => {
3.            //res替换了state
4.            this.setState(res,() => {
5.                //第一次加载的时候把firstLoading设置为false
6.                this.setState({
7.                   firstLoading:false
8.                })
9.            });
10.        },errMsg =>{
11.             this.setState({
12.                 list : []
13.             });
14.             _mm.errorTips(errMsg);
15.        })
16.     }

3.当页码改变的时候触发onChange事件，调用onPageNumChange函数，传入当前页pageNum,更新state里边的pageNum

1. //当页数变化的时候改变pageNum
2.  onPageNumChange(pageNum){
3.      //setSate是个异步函数
4.      this.setState({
5.          pageNum : pageNum
6.      },() => {
7.          //当页码更新了重新请求每页的记录，后台返回数据是根据页码返回的
8.          this.loadUserList();
9.      })
10.  }

最新文章

1. js_事件委托
2. rails查询mongodb通用查询
3. Python字符进度条
4. frameset用法
5. -WEBKIT-USER-SELECT:NONE导致输入框无法输入
6. DUBBO本地搭建及小案例
7. Hadoop Hive概念学习系列之什么是Hive？（一）
8. angular应用前景
9. U3D 实现子弹发射效果
10. c++ 顺序容器学习 - 容器适配器
11. CSS3/HTML5实现漂亮的分步骤注册登录表单
12. C#生成带项目编号的Word段落
13. VBS脚本操作网页元素
14. windows phone 8.1开发:文件选择器FileSavePicker
15. LaTex basics
16. PHP基础语法 【】【】 PHP函数
17. HDU 1087 最长不下降子序列 LIS DP
18. python学习笔记11-文件操作方法
19. 钉钉机器人-实现监控通知功能-python
20. open-falcon之query

热门文章

1. Spring学习和应用
2. AngularJs页面跳转
3. 配置文件中取值： spring配置文件中util:properties和context:property-placeholder
4. POJ - 3450
5. (转)linux下文件删除的原理精华讲解（考试题答案系列）
6. mysql 位操作支持
7. 精心收集的SSH框架的面试题汇总
8. docker exit status 255解决
9. Crash日志分析
10. 未整理js