Ng Alain分页控件的使用

在【Ng Alain】官方示例源码中，关于pagination分页控件的代码如下：

    <ng-template #pagination>
      <nz-pagination [nzTotal]="50" [nzPageSize]="5" (nzPageIndexChange)="getData()"></nz-pagination>
    </ng-template>

其实，这并不是真实的业务用法，并没有反应实际的业务数据，我们对这段代码稍微改造一下，看下Ng Alain实际应该使用分页控件。

首先增加一个双向绑定，[(nzPageIndex)]="pageIndex"，用以记录页面实际页码，实际上，nzPageSize和nzTotal都应该双向绑定，简单起见，我们仅设置当前页面pageIndex为双向绑定。

    <ng-template #pagination>
      <nz-pagination  [nzTotal]="36" [nzPageSize]="5" [(nzPageIndex)]="pageIndex" (nzPageIndexChange)="getData()"></nz-pagination>
    </ng-template>

后台代码getData()增加pageIndex和pageSize参数，当点击不同的页码时显示不同的数据，注意，这里记录总数我们假定为36

  getData() {
    console.log("nzPageIndex is " + this.pageIndex);
    this.loading = true;
    this.http.get('/api/list?pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize, {count: 5}).subscribe((res: any) => {
      console.log('basic list res is '+JSON.stringify(res));
      this.data = res;
      this.loading = false;
    });
  }

接下来调整我们的接口代码/api/list

• Controller接口定义

    @GetMapping("list")
    public List<NgList> getList(@RequestParam(value = "pageIndex", required = false) Integer pageIndex
            , @RequestParam(value = "pageSize", required = false) Integer pageSize) {
        return apiService.getList(pageIndex, pageSize);
    }

• 接口实现ServiceImpl

    @Override
    public List<NgList> getList(Integer pageIndex, Integer pageSize) {
        if (pageIndex == null) {
            pageIndex = 1;
        }
        if (pageSize == null) {
            pageSize = 5;
        }
        List<NgList> ngLists = new ArrayList<>();
        int start = (pageIndex - 1) * pageSize + 1;
        int end = pageIndex * pageSize;
        if (end > 36) {
            end = 36;
        }
        for (int i = start; i <= end; i++) {
            ngLists.add(
                    NgList.builder()
                            .id("FakeList-" + i)
                            .owner(user.get(i % 10))
                            .title("【" + i + "】" + titles.get(i % 8))
                            .avatar(avatars.get(i % 8))
                            .cover(covers.get(i % 4))
                            .status(statuses.get(i % 3))
                            .percent((int) Math.ceil(Math.random() * 50) + 50)
                            .logo(avatars.get(i % 8))
                            .href("http://github.com")
                            .updatedAt(Calendar.getInstance().getTime().getTime())
                            .createdAt(Calendar.getInstance().getTime().getTime())
                            .subDescription("【" + i + "】" + desc.get(i % 5))
                            .description("月落乌啼霜满天，江枫渔火对愁眠")
                            .activeUser((int) Math.ceil(Math.random() * 100000) + 100000)
                            .newUser((int) Math.ceil(Math.random() * 100000) + 100000)
                            .star((int) Math.ceil(Math.random() * 100000) + 100000)
                            .like((int) Math.ceil(Math.random() * 100000) + 100000)
                            .message((int) Math.ceil(Math.random() * 100000) + 100000)
                            .content("段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。")
                            .member(List.of(
                                    Map.of("avatar", "https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png", "name", "赵小小")
                                    , Map.of("avatar", "https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png", "name", "王昭君")
                                    , Map.of("avatar", "https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png", "name", "赵飞燕")

                            ))
                            .build()
            );
        }
        return ngLists;
    }

构建启动，我们看下实际效果如下：

• 第一页内容
  

• 第二页内容