Ng Alain分页控件的使用

水深无声 2022-04-13 12:49 448阅读 0赞

在【Ng Alain】[官方示例源码][Link 1]中，关于**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;
        }

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

*  第一页内容  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70]
 *  第二页内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 1]

[Link 1]: https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/pro/list/basic-list/basic-list.component.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70]: /images/20220413/2cd05a4ad51e47089446d80e75dd0490.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdrYW5nbG91_size_16_color_FFFFFF_t_70 1]: /images/20220413/10616781d86b475b8d46e9394e6ca2cf.png