商品列表的分页展示+响应式布局
一、参考代码网站:https://github.com/ikismail/Angular-ShoppingCart
二、其余参考资料:
1. 分页器:https://material.angular.io/components/paginator/examples
2. Material Design 官网:https://material.angular.io/components/categories
3. Material中文官网:https://material.angular.cn/components/categories
三、分页功能的具体参考实例及参考网站
- 网站1(关于分页):https://material.angular.io/components/table/examples
- 网站2(关于响应式):https://zoaibkhan.com/blog/create-a-responsive-card-grid-in-angular-using-flex-layout-part-1/
- 网站3(关于列表分页):https://stackblitz.com/edit/angular-e1f9hq
- 网站4(关于列表分页):http://michaelbromley.github.io/ngx-pagination/#/
(一)例子1:
- HTML文件中:
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let row"> {{row.id}} </td>
</ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="progress">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Progress </th>
<td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="color">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
<td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
- TS文件中:
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
export interface UserData {
id: string;
name: string;
progress: string;
color: string;
}
/** Constants used to fill up our data base. */
const COLORS: string[] = [
'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
'aqua', 'blue', 'navy', 'black', 'gray'
];
const NAMES: string[] = [
'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
];
/**
* @title Data table with sorting, pagination, and filtering.
*/
@Component({
selector: 'table-overview-example',
styleUrls: ['table-overview-example.css'],
templateUrl: 'table-overview-example.html',
})
export class TableOverviewExample implements AfterViewInit {
displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
dataSource: MatTableDataSource<UserData>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor() {
// Create 100 users
const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));
// Assign the data to the data source for the table to render
this.dataSource = new MatTableDataSource(users);
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
/** Builds and returns a new User. */
function createNewUser(id: number): UserData {
const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id: id.toString(),
name: name,
progress: Math.round(Math.random() * 100).toString(),
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}
- CSS文件中:
table {
width: 100%;
}
.mat-form-field {
font-size: 14px;
width: 100%;
}
td, th {
width: 25%;
}
(二)例子2:
学习一下: MatPageinator. 注意TS中的import {MatPaginator} from ‘@angular/material/paginator’;
- HTML文件中:
<mat-form-field>
<mat-label>List length</mat-label>
<input matInput [(ngModel)]="length" type="number">
</mat-form-field>
<mat-form-field>
<mat-label>Page size</mat-label>
<input matInput [(ngModel)]="pageSize" type="number">
</mat-form-field>
<mat-form-field>
<mat-label>Page size options</mat-label>
<input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
[ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">
</mat-form-field>
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = $event">
</mat-paginator>
<div *ngIf="pageEvent">
<h5>Page Change Event Properties</h5>
<div>List length: {{pageEvent.length}}</div>
<div>Page size: {{pageEvent.pageSize}}</div>
<div>Page index: {{pageEvent.pageIndex}}</div>
</div>
- TS文件中:
import {Component} from '@angular/core';
import {PageEvent} from '@angular/material/paginator';
/**
* @title Configurable paginator
*/
@Component({
selector: 'paginator-configurable-example',
templateUrl: 'paginator-configurable-example.html',
styleUrls: ['paginator-configurable-example.css'],
})
export class PaginatorConfigurableExample {
// MatPaginator Inputs
length = 100;
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 25, 100];
// MatPaginator Output
pageEvent: PageEvent;
setPageSizeOptions(setPageSizeOptionsInput: string) {
if (setPageSizeOptionsInput) {
this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
}
}
}
- CSS文件中:
.mat-form-field {
margin-right: 12px;
}