ajax paging table

components/table/demo/ajax.md

@@ -27,6 +27,13 @@ var dataSource = {
   url: "/components/table/demo/data.json",
   resolve: function(result) {
     return result.data;
+  },
+  // 和后台接口返回的分页数据进行适配
+  getPagination: function(result) {
+    return {
+      total: result.totalCount,
+      pageSize: result.pageSize
+    }
   }
 };
 

components/table/demo/data.json

@@ -1,18 +1,46 @@
 {
   "data": [{
-    "name": "胡彦斌ajax",
+    "name": "胡彦斌ajax1",
     "age": 32,
     "address": "西湖区湖底公园1号"
   }, {
-    "name": "胡彦祖ajax",
+    "name": "胡彦祖ajax2",
     "age": 42,
     "address": "西湖区湖底公园1号"
   }, {
-    "name": "李大嘴ajax",
+    "name": "李大嘴ajax3",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax4",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax5",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax6",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax7",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax8",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax9",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax10",
     "age": 32,
     "address": "西湖区湖底公园1号"
   }],
-  totalCount: 35,
-  pageSize: 10,
-  currentPage: 1
+  "totalCount": 35,
+  "pageSize": 10,
+  "currentPage": 1
 }

components/table/demo/head.md

@@ -54,5 +54,5 @@ var data = [{
 }];
 
 React.render(<Table columns={columns} dataSource={data} />
-, document.getElementById('components-table-demo-column-header'));
+, document.getElementById('components-table-demo-head'));
 ````

components/table/demo/paging.md

@@ -24,7 +24,7 @@ var columns = [{
 }];
 var data = [];
 
-for (let i=0; i<22; i++) {
+for (let i=0; i<18; i++) {
   data.push({
     name: '李大嘴' + i,
     age: 32,

components/table/index.jsx

@@ -35,6 +35,7 @@ let AntTable = React.createClass({
     } else {
       pagination = this.props.pagination || {};
       pagination.pageSize = pagination.pageSize || 10;
+      pagination.total = this.props.dataSource.length || 10;
     }
     return {
       selectedRowKeys: [],
@@ -134,17 +135,8 @@ let AntTable = React.createClass({
     }
   },
   handlePageChange: function(current) {
-    console.log(current);
-    current = current || 1;
-    let pageSize = this.state.pagination.pageSize;
-    this.setState({
-      data: this.props.dataSource.filter(function(item, i) {
-        if (i >= (current - 1) * pageSize &&
-            i < current * pageSize) {
-          return item;
-        }
-      })
-    });
+    this.state.pagination.current = current || 1;
+    this.fetch();
   },
   renderSelectionCheckBox(value, record, index) {
     let checked = this.state.selectedRowKeys.indexOf(index + 1) >= 0;
@@ -250,24 +242,39 @@ let AntTable = React.createClass({
         params: dataSource.getParams(),
         success: (result) => {
           if (this.isMounted()) {
+            let pagination = jQuery.extend(
+              this.state.pagination,
+              dataSource.getPagination.call(this, result)
+            );
             this.setState({
               data: dataSource.resolve.call(this, result),
-              pagination: dataSource.getPagination.call(this, result)
+              pagination: pagination,
+              loading: false
             });
           }
         },
-        complete: () => {
+        error: () => {
           this.setState({
             loading: false
           });
         }
       });
     } else {
-      this.handlePageChange(this.state.pagination.current);
+      let pageSize = this.state.pagination.pageSize;
+      let current = this.state.pagination.current;
+      this.setState({
+        data: this.props.dataSource.filter(function(item, i) {
+          if (i >= (current - 1) * pageSize &&
+              i < current * pageSize) {
+            return item;
+          }
+        }),
+        pagination: this.state.pagination
+      });
     }
   },
   componentDidMount() {
-    this.fetch();
+    this.handlePageChange();
   },
   render() {
     this.props.columns = this.renderRowSelection();