Decoration4：分页展示

现在我们实现前台List的分页展示，这也是最基本的要求

先看现在的Rest数据格式，在spring的默认返回中，分页用到的元素都已经在page节点中返回了，只要在前台合理利用就足够了

{
  "links" : [ {
    "rel" : "self",
    "href" : "http://localhost:8080/coach"
  }, {
    "rel" : "profile",
    "href" : "http://localhost:8080/profile/coach"
  }, {
    "rel" : "search",
    "href" : "http://localhost:8080/coach/search"
  } ],
  "content" : [ {
    "id" : 1,
    "name" : "Jack",
    "password" : "Bauer",
    "age" : 10,
    "content" : [ ],
    "links" : [ {
      "rel" : "self",
      "href" : "http://localhost:8080/coach/1"
    }, {
      "rel" : "coach",
      "href" : "http://localhost:8080/coach/1"
    } ]
  }, {
    "id" : 2,
    "name" : "Chloe",
    "password" : "OBrian",
    "age" : 10,
    "content" : [ ],
    "links" : [ {
      "rel" : "self",
      "href" : "http://localhost:8080/coach/2"
    }, {
      "rel" : "coach",
      "href" : "http://localhost:8080/coach/2"
    } ]
  }],
  "page" : {
    "size" : 20,             -----这里是页面大小
    "totalElements" : 15,    -----这里是总行数
    "totalPages" : 1,        ----这里是总页数
    "number" : 0             ------这里是当前页
  }
}

1、spring-data-rest的分页请求url

http://localhost:8080/coach?page=0&size=20

2、接下来就是选型问题，到底该用哪一种分页插件呢

（1）Smart-Table

（2）ng-grid

（3）自定义写法

使用1/2两种都比较重量级，所以从GitHub上找了一个相对来说比较轻量级的插件angularjs-pagination,页面中引入ng-pagination.min.js、ng-pagination.min.css两个文件，在Controller中设置

$scope.pageCount = data.page.totalPages;
$scope.currentPage = data.page.number;

$scope.onPageChange = function() {
        commonService.getPage($scope.currentPage - 1).then(function(data) {
            console.log("Get CoachList Success");
            $scope.coachs = data;
        }, function() {
            console.log("Get CoachList Error");
            $scope.errorMessage = 'Get CoachList Error';
        })
    };

效果如下：

 这里想到一个遗留问题：第一次访问的时候能不能只查询第一页的内容，而不是上来就load完所有数据。