Angular 客户端分页 [英] Angular Client Side Pagination
问题描述
我正在从数据库中提取一组数据并用一个简单的表格显示它.我想要做的是向该表格添加分页功能.例如,在每个页面中将有 5 行.在这种情况下 courseData是数组.
<tr ><td style="font-size: 20px;">CRN</td><预><td style = "字体大小:20px;">姓名</td><预>
<td style="字体大小:20px;">讲师</td><预>
<td style = "字体大小:20px;">级别</td><预>
<td style = "字体大小:20px;">天</td><预>
<td style = "字体大小:20px;">时间</td></tr><ng-container *ngFor="let data of courseData"><tr><td style="text-decoration: underline;"(click)="crnClicked(data.crn)">{{data.crn}}<预>
<td *ngIf="data.specialapp !=1" >{{data.name}}</td><td style="font-weight: bold;"*ngIf="data.specialapp==1" >{{data.name}}</td><预>
<td>{{data.lecturer}}</td><预>
<td>{{data.level}}</td><预>
<td>{{data.days}}</td><预>
<td>{{data.hours}}</td><button *ngIf="data.specialapp!=1" ion-button 小圆(click)="addCrn(data.crn)" color="primary" block>+</button></tr></ng-容器>
您可以使用 ngx-pagination>模块.请试试
<ng-container *ngFor="let data of courseData | paginate: { id: 'foo',itemsPerPage:页面大小,当前页面:p,totalItems:总计></ng-容器>
app.module.ts:
从'@angular/core'导入{NgModule};从@angular/platform-browser"导入{BrowserModule};从'ngx-pagination'导入{NgxPaginationModule};//<-- 导入模块从 './my.component' 导入 {MyComponent};@NgModule({import: [BrowserModule, NgxPaginationModule],//<-- 将它包含在你的应用模块中声明:[MyComponent],引导程序:[MyComponent]})导出类 MyAppModule {}
my.component.ts:
import {Component} from '@angular/core';@成分({选择器:'我的组件',模板:`<ul><li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }">... </li><pagination-controls (pageChange)="p = $event"></pagination-controls>`})导出类 MyComponent {p: 数字 = 1;集合:any[] = someArrayOfThings;}
I am pulling an array of data from database and displaying it with a simple table.What i am trying to do is adding a pagination feature to this table.For example in each page there will be 5 rows.In this case courseData is the array.
<table style="border-spacing: 5rem">
<tr >
<td style="font-size: 20px;">CRN</td>
<pre> </pre>
<td style = "font-size: 20px;" >Name</td>
<pre> </pre>
<td style ="font-size: 20px;" >Lecturer</td>
<pre> </pre>
<td style = "font-size: 20px;" >Level</td>
<pre> </pre>
<td style = "font-size: 20px;" >Days</td>
<pre> </pre>
<td style = "font-size: 20px;" >Time</td>
</tr>
<ng-container *ngFor="let data of courseData">
<tr>
<td style="text-decoration: underline;" (click)="crnClicked(data.crn)">{{data.crn}}</td>
<pre> </pre>
<td *ngIf="data.specialapp !=1" >{{data.name}}</td>
<td style="font-weight: bold;"*ngIf="data.specialapp==1" >{{data.name}}</td>
<pre> </pre>
<td>{{data.lecturer}}</td>
<pre> </pre>
<td>{{data.level}}</td>
<pre> </pre>
<td>{{data.days}}</td>
<pre> </pre>
<td>{{data.hours}}</td>
<button *ngIf="data.specialapp!=1" ion-button small round (click)="addCrn(data.crn)" color="primary" block>+</button>
</tr>
</ng-container>
</table>
You can use ngx-pagination module. Please try
<ng-container *ngFor="let data of courseData | paginate: { id: 'foo',
itemsPerPage: pageSize,
currentPage: p,
totalItems: total>
</ng-container>
app.module.ts:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';
@NgModule({
imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class MyAppModule {}
my.component.ts:
import {Component} from '@angular/core';
@Component({
selector: 'my-component',
template: `
<ul>
<li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
</ul>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
`
})
export class MyComponent {
p: number = 1;
collection: any[] = someArrayOfThings;
}
这篇关于Angular 客户端分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!