时间戳

首页 > 解决方案 > 两个列表的分页

angular - 两个列表的分页

问题描述

我很困惑必须制作一个包含 2 个列表或 2 个“let”的表格分页。

例如，在我的一个页面上，当我只使用一个列表时，我已经成功实现了分页

 <div *ngFor="let group of persons">
                        <div *ngIf="group.name == 'all'">
                            <div class="row content-row" *ngFor="let person of group.array |  search: term  |  orderBy: order | paginate: {itemsPerPage: 13, currentPage:page1, id: '1'}"
                                [routerLink]="['/person/edit', person.id]">
                                <div class="col col-md-6">{{person.name}}</div>
                                <div class="col col-md-2">{{person.id}}</div>
                                <div class="col col-md-2">{{person.place?.fullName}}</div>
                                <div *ngIf="person.organization?.name != null" class="col col-md-2">{{person.organization?.name}}

                                </div>
                                 <div *ngIf="person.organization?.name == null" class="col col-md-2"><span class="badge badge-danger">-- N/A -- </span></div> 


                            </div>
                        </div>
                        <div *ngIf="group.name != 'all'">
                            <div class="row content-row">
                                <div class="col col-md-12 group-name" (click)="toggleGroup(group.name)">{{group.name + ':'}}</div>
                            </div>
                            <div *ngIf="showGroup == group.name">
                                <div class="row content-row" *ngFor="let person of group.array |  paginate: {itemsPerPage: 5, currentPage:page2, id: '2'}"
                                    [routerLink]="['/person/edit', person.id]">
                                    <div class="col col-md-6" style="padding-left:23px;">{{person.name}}</div>
                                    <div class="col col-md-2">{{person.id}}</div>
                                    <div class="col col-md-2">{{person.place?.fullName}}</div>
                                    <div class="col col-md-2">{{person.organization.name}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

现在在不同的页面上，我创建了包含人员（从上面）和组织的表。

我希望分页在一个分页下显示两个列表，并且我希望每页 13 个项目。我该如何继续，我将发布我已经制作的代码，没有分页，所以你可以看看，希望能指出我正确的方向。非常感谢您的参与。

<div class="row" style="margin-top:50px;margin-left:15px;">
 <div class="card-body">
      <div class="row velicinatabele">

            <div class="table-col">
                <div class="card table">
                    <div class="row header" style="">
                        <div class="col col-md-6">Name</div>
                        <div class="col col-md-2">ID</div>
                        <div class="col col-md-2">Location</div>
                        <div class="col col-md-2">Employee/Company</div>
                    </div>
                    <div *ngFor="let group of organizations">
                        <div *ngIf="group.name == 'all'">
                            <div class="row content-row" *ngFor="let organization of group.array |  search: term |   orderBy: order"
                                [routerLink]="['/organization/edit', organization.id]">
                                <div class="col col-md-6">{{organization.name}}</div>
                                <div class="col col-md-2">{{organization.id}}</div>
                                <div class="col col-md-2">{{organization.place?.fullName}}</div>
                                <div *ngIf="organization.person?.name != null" class="col col-md-2">{{organization.person?.name}}

                                </div>
                                 <div *ngIf="organization.person?.name == null" class="col col-md-2"><span class="badge badge-danger">-- N/A -- </span></div> 


                            </div>
                        </div>
                        <div *ngIf="group.name != 'all'">
                            <div class="row content-row">
                                <div class="col col-md-12 group-name" (click)="toggleGroup(group.name)">{{group.name + ':'}}</div>
                            </div>
                            <div *ngIf="showGroup == group.name">
                                <div class="row content-row" *ngFor="let organization of group.array |  paginate: {itemsPerPage: 5, currentPage:page2, id: '2'}"
                                    [routerLink]="['/organization/edit', organization.id]">
                                    <div class="col col-md-6" style="padding-left:23px;">{{organization.name}}</div>
                                    <div class="col col-md-2">{{organization.id}}</div>
                                    <div class="col col-md-2">{{organization.place?.fullName}}</div>
                                    <div class="col col-md-2">{{organization.person?.name}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


 <div *ngFor="let group of persons">
                        <div *ngIf="group.name == 'all'">
                            <div class="row content-row" *ngFor="let person of group.array |  search: term  |  orderBy: order | paginate: {itemsPerPage: 13, currentPage:page1, id: '1'}"
                                [routerLink]="['/person/edit', person.id]">
                                <div class="col col-md-6">{{person.name}}</div>
                                <div class="col col-md-2">{{person.id}}</div>
                                <div class="col col-md-2">{{person.place?.fullName}}</div>
                                <div *ngIf="person.organization?.name != null" class="col col-md-2">{{person.organization?.name}}

                                </div>
                                 <div *ngIf="person.organization?.name == null" class="col col-md-2"><span class="badge badge-danger">-- N/A -- </span></div> 


                            </div>
                        </div>
                        <div *ngIf="group.name != 'all'">
                            <div class="row content-row">
                                <div class="col col-md-12 group-name" (click)="toggleGroup(group.name)">{{group.name + ':'}}</div>
                            </div>
                            <div *ngIf="showGroup == group.name">
                                <div class="row content-row" *ngFor="let person of group.array |  paginate: {itemsPerPage: 5, currentPage:page2, id: '2'}"
                                    [routerLink]="['/person/edit', person.id]">
                                    <div class="col col-md-6" style="padding-left:23px;">{{person.name}}</div>
                                    <div class="col col-md-2">{{person.id}}</div>
                                    <div class="col col-md-2">{{person.place?.fullName}}</div>
                                    <div class="col col-md-2">{{person.organization.name}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div *ngIf="!(organizations[0].array.length > 0)" class="row noResults">
                        <label>Nema rezultata..</label>
                    </div>
                    <div *ngIf="organizations[0].name == 'all'" class="paggination-row">
                        <div class="paggination">
                            <pagination-controls (pageChange)="page1 = $event" id="1" maxSize="5" directionLinks="true" autoHide="true" previousLabel="Previous"
                                nextLabel="Next">
                            </pagination-controls>
                        </div>
                    </div>
                    <div *ngIf="drmsorganizations[0].name != 'all' && showGroup != ''" class="paggination-row">
                        <div class="paggination">
                            <pagination-controls (pageChange)="page2 = $event" id="2" maxSize="5" directionLinks="true" autoHide="true" previousLabel="Previous"
                                nextLabel="Next">
                            </pagination-controls>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
</div>

标签： angularpaginationangular5

解决方案

我自己修好了。我将在下面发布答案，以便任何偶然发现这篇文章的人都可以解决他的分页问题。

如果您有 2 个列表，并且您需要将它们都显示在一个分页中。如果您要显示每页 12 个项目，您所要做的就是跟随。

在第一个列表中执行以下操作

<div class="row content-row" *ngFor="let organization of group.array |  search: term  |  orderBy: order | paginate: {itemsPerPage: 6, currentPage:page1, id: '1'}"

在另一个名单上

  <div class="row content-row" *ngFor="let person of group.array |  search: term  |  orderBy: order | paginate: {itemsPerPage: 6, currentPage:page1, id: '2'}"

确保第二个列表使用 id:'2' 并且分页将完美运行！

这适用于 x 个列表，只需更改 id 并根据自己的喜好调整每页的项目。

推荐阅读