在 div / table 上使用 bootstrap 和 Angular4 进行分页答案

【问题标题】：Pagination with bootstrap and Angular4 on div / table在 div / table 上使用 bootstrap 和 Angular4 进行分页
【发布时间】：2023-04-06 11:09:01
【问题描述】：

我在 Angular4 项目中有一个“卡片”列表，我想每页只显示 6 个，我可以在桌子上使用分页，但是对于“卡片”我不能（我认为它正在等待行ans列，卡片的代码是：

<div style="position:relative;">
                 <table class="row">
                    <div id="jasmine_content" class="x_content col-lg-4 col-md-5 col-sm-8 col-form-label-sm" [ngbCollapse]="isCollapsed"  *ngFor="let instance of entityList.list; trackBy:trackByFn; let idx=index;">
                        <div class="card mb-2 ">
                            <div class=" card-header table table-hover table-striped">

                                <td>

                                    <ng-container *ngFor="let column of entityList.metadata.columns" [ngSwitch]="column.order" >

                                        <tr *ngSwitchCase="2" >{{ entityName.toLowerCase() + '.' + column.key  | translate}}&nbsp; - &nbsp;
                                            {{getValue(instance, column.key) | ellipsis:200}}</tr>
                                        <tr *ngSwitchCase="3" >{{ entityName.toLowerCase() + '.' + column.key  | translate}}&nbsp; - &nbsp;
                                            {{getValue(instance, column.key) | ellipsis:200}}</tr>
                                        <tr *ngSwitchCase="5" >{{ entityName.toLowerCase() + '.' + column.key  | translate}}&nbsp; - &nbsp;
                                            {{getValue(instance, column.key) | ellipsis:200}}</tr>

                                    </ng-container>
                                </td>
                               </div>
                            </div>
                        </div>
                    </table>
</div>

我拿到了卡片，但只有一页，我怎样才能以最简单的方式使用分页？

PS：在列表中，我使用下一行进行分页：

...
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-striped">
<thead>
                <tr>
                    <th *ngFor="let column of entityList.metadata.columns">
                        {{ entityName.toLowerCase() + '.' + column.key | translate}}
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let instance of entityList.list; trackBy:trackByFn; let idx=index;">
                    <ng-container *ngFor="let column of entityList.metadata.columns"  [ngSwitch]="column.type">
                        <td *ngSwitchCase="'date'">{{getValue(instance, column.key) | date:'y/MM/dd'}}</td>
                        <td *ngSwitchCase="'text'">{{getValue(instance, column.key) | ellipsis:200}}</td>
                        <td *ngSwitchCase="'boolean'">
                            <input type="checkbox" [checked]="getValue(instance, column.key)" disabled/></td>
                        <td *ngSwitchDefault>{{ getValue(instance, column.key)}}</td>
                    </ng-container>
                </tr>
            </tbody>
        </table>

...

我在桌子上用线条和列进行分页。

【问题讨论】：

标签： angular pagination bootstrap-4

【解决方案1】：

我想我做到了，我使用了 ngx-paginantion：首先安装它：

npm install ngx-pagination

将其添加到 appModule：

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({
    imports: [
        NgxPaginationModule
....

在 Html 上，*ngfor 你想要迭代和细分成页面：

*ngFor="let instance of (entityList.list | paginate: { itemsPerPage:5, currentPage: p} )

(...)

<pagination-controls (pageChange)="p = $event"></pagination-controls>

为了方便起见，我正在通过该 div 创建卡片：
<table class="row">
<div  id="jasmine_content" class="x_content col-lg-4 col-md-5 col-sm-8 col-form-label-sm" [ngbCollapse]="isCollapsed"  *ngFor="let
(entityList.list | searchFilter: search.value) 的实例； trackBy:trackerByFn;让 idx=索引；"> （.......卡片在这里......）

如何使用 ngb-pagination 对项目（实例）进行分页，或者类似的东西？

【讨论】：