Skip to content
Permalink
Browse files

feat(module:pagination): support pagination nzDisabled

  • Loading branch information...
vthinkxie committed Jun 20, 2019
1 parent 67f6fa2 commit 141bef8e935e46a4ad666ff2ad2b52fddac8525a
@@ -4,6 +4,8 @@ import { Component } from '@angular/core';
selector: 'nz-demo-pagination-changer',
template: `
<nz-pagination [nzPageIndex]="3" [nzTotal]="500" nzShowSizeChanger [nzPageSize]="10"></nz-pagination>
<br />
<nz-pagination [nzPageIndex]="3" [nzTotal]="500" nzShowSizeChanger [nzPageSize]="10" nzDisabled></nz-pagination>
`,
styles: []
})
@@ -4,6 +4,8 @@ import { Component } from '@angular/core';
selector: 'nz-demo-pagination-jump',
template: `
<nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper></nz-pagination>
<br />
<nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper nzDisabled></nz-pagination>
`,
styles: []
})
@@ -33,6 +33,7 @@ import { NzPaginationModule } from 'ng-zorro-antd';
| `[nzTotal]` | total number of data items | `number` | `0` |
| `[nzPageIndex]` | current page number,double binding | `number` | `1` |
| `[nzPageSize]` | number of data items per page, double binding | `number` | `10`|
| `[nzDisabled]` | disable pagination | `boolean` | `false`|
| `[nzShowQuickJumper]` | determine whether you can jump to pages directly | `boolean` | `false` |
| `[nzShowSizeChanger]` | determine whether `nzPageSize` can be changed | `boolean` | `false` |
| `[nzSimple]` | whether to use simple mode | `boolean` | - |
@@ -34,6 +34,7 @@ import { NzPaginationModule } from 'ng-zorro-antd';
| `[nzTotal]` | 数据总数 | `number` | - |
| `[nzPageIndex]` | 当前页数,可双向绑定 | `number` | `1` |
| `[nzPageSize]` | 每页条数 ,可双向绑定| `number` | `10`|
| `[nzDisabled]` | 是否禁用 | `boolean` | `false`|
| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` |
| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` |
| `[nzSimple]` | 当添加该属性时,显示为简单分页 | `boolean` | - |
@@ -1,52 +1,63 @@
<ng-template #renderItemTemplate let-type let-page="page">
<a class="ant-pagination-item-link" *ngIf="type==='pre'"><i nz-icon type="left"></i></a>
<a class="ant-pagination-item-link" *ngIf="type==='next'"><i nz-icon type="right"></i></a>
<a class="ant-pagination-item-link" *ngIf="type==='pre'">
<i nz-icon type="left"></i>
</a>
<a class="ant-pagination-item-link" *ngIf="type==='next'">
<i nz-icon type="right"></i>
</a>
<a *ngIf="type=='page'">{{ page }}</a>
</ng-template>
<ng-container *ngIf="nzHideOnSinglePage && (nzTotal > nzPageSize) || !nzHideOnSinglePage">
<ul class="ant-pagination"
[class.ant-table-pagination]="nzInTable"
[class.ant-pagination-simple]="nzSimple"
[class.mini]="(nzSize === 'small') && !nzSimple">
[class.ant-table-pagination]="nzInTable"
[class.ant-pagination-simple]="nzSimple"
[class.ant-pagination-disabled]="nzDisabled"
[class.mini]="(nzSize === 'small') && !nzSimple">
<ng-container *ngIf="nzSimple; else normalTemplate">
<li class="ant-pagination-prev"
[attr.title]="locale.prev_page"
[class.ant-pagination-disabled]="isFirstIndex"
(click)="jumpDiff(-1)">
[attr.title]="locale.prev_page"
[class.ant-pagination-disabled]="isFirstIndex"
(click)="jumpDiff(-1)">
<ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'pre'}"></ng-template>
</li>
<li [attr.title]="nzPageIndex+'/'+lastIndex" class="ant-pagination-simple-pager">
<input #simplePagerInput [value]="nzPageIndex" (keydown.enter)="handleKeyDown($event,simplePagerInput,false)" size="3">
<input #simplePagerInput
[disabled]="nzDisabled"
[value]="nzPageIndex"
(keydown.enter)="handleKeyDown($event,simplePagerInput,false)"
size="3">
<span class="ant-pagination-slash">/</span>
{{ lastIndex }}
</li>
<li class="ant-pagination-next"
[attr.title]="locale.next_page"
[class.ant-pagination-disabled]="isLastIndex"
(click)="jumpDiff(1)">
[attr.title]="locale.next_page"
[class.ant-pagination-disabled]="isLastIndex"
(click)="jumpDiff(1)">
<ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'next'}"></ng-template>
</li>
</ng-container>
<ng-template #normalTemplate>
<li class="ant-pagination-total-text" *ngIf="nzShowTotal">
<ng-template [ngTemplateOutlet]="nzShowTotal" [ngTemplateOutletContext]="{ $implicit: nzTotal,range:ranges }"></ng-template>
<ng-template [ngTemplateOutlet]="nzShowTotal"
[ngTemplateOutletContext]="{ $implicit: nzTotal,range:ranges }"></ng-template>
</li>
<li class="ant-pagination-prev"
[attr.title]="locale.prev_page"
[class.ant-pagination-disabled]="isFirstIndex"
(click)="jumpDiff(-1)">
[attr.title]="locale.prev_page"
[class.ant-pagination-disabled]="isFirstIndex"
(click)="jumpDiff(-1)">
<ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'pre'}"></ng-template>
</li>
<li class="ant-pagination-item"
[attr.title]="firstIndex"
[class.ant-pagination-item-active]="isFirstIndex"
(click)="jumpPage(firstIndex)">
<ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: firstIndex }"></ng-template>
[attr.title]="firstIndex"
[class.ant-pagination-item-active]="isFirstIndex"
(click)="jumpPage(firstIndex)">
<ng-template [ngTemplateOutlet]="nzItemRender"
[ngTemplateOutletContext]="{ $implicit: 'page',page: firstIndex }"></ng-template>
</li>
<li class="ant-pagination-jump-prev"
*ngIf="(lastIndex > 9) && (nzPageIndex - 3 > firstIndex)"
[attr.title]="locale.prev_5"
(click)="jumpDiff(-5)">
*ngIf="(lastIndex > 9) && (nzPageIndex - 3 > firstIndex)"
[attr.title]="locale.prev_5"
(click)="jumpDiff(-5)">
<a class="ant-pagination-item-link">
<div class="ant-pagination-item-container">
<i nz-icon type="double-left" class="ant-pagination-item-link-icon"></i>
@@ -55,16 +66,17 @@
</a>
</li>
<li class="ant-pagination-item"
*ngFor="let page of pages"
[attr.title]="page"
[class.ant-pagination-item-active]="nzPageIndex === page"
(click)="jumpPage(page)">
<ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: page }"></ng-template>
*ngFor="let page of pages"
[attr.title]="page"
[class.ant-pagination-item-active]="nzPageIndex === page"
(click)="jumpPage(page)">
<ng-template [ngTemplateOutlet]="nzItemRender"
[ngTemplateOutletContext]="{ $implicit: 'page',page: page }"></ng-template>
</li>
<li class="ant-pagination-jump-next ant-pagination-item-link-icon"
[attr.title]="locale.next_5"
(click)="jumpDiff(5)"
*ngIf="(lastIndex > 9) && (nzPageIndex + 3 < lastIndex)">
[attr.title]="locale.next_5"
(click)="jumpDiff(5)"
*ngIf="(lastIndex > 9) && (nzPageIndex + 3 < lastIndex)">
<a class="ant-pagination-item-link">
<div class="ant-pagination-item-container">
<i nz-icon type="double-right" class="ant-pagination-item-link-icon"></i>
@@ -73,36 +85,40 @@
</a>
</li>
<li class="ant-pagination-item"
[attr.title]="lastIndex"
(click)="jumpPage(lastIndex)"
*ngIf="(lastIndex > 0) && (lastIndex !== firstIndex)"
[class.ant-pagination-item-active]="isLastIndex">
<ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: lastIndex }"></ng-template>
[attr.title]="lastIndex"
(click)="jumpPage(lastIndex)"
*ngIf="(lastIndex > 0) && (lastIndex !== firstIndex)"
[class.ant-pagination-item-active]="isLastIndex">
<ng-template [ngTemplateOutlet]="nzItemRender"
[ngTemplateOutletContext]="{ $implicit: 'page',page: lastIndex }"></ng-template>
</li>
<li class="ant-pagination-next"
[title]="locale.next_page"
[class.ant-pagination-disabled]="isLastIndex"
(click)="jumpDiff(1)">
[title]="locale.next_page"
[class.ant-pagination-disabled]="isLastIndex"
(click)="jumpDiff(1)">
<ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'next'}"></ng-template>
</li>
<div class="ant-pagination-options" *ngIf="nzShowQuickJumper || nzShowSizeChanger">
<nz-select class="ant-pagination-options-size-changer"
*ngIf="nzShowSizeChanger"
[nzSize]="nzSize"
[ngModel]="nzPageSize"
(ngModelChange)="onPageSizeChange($event)">
*ngIf="nzShowSizeChanger"
[nzDisabled]="nzDisabled"
[nzSize]="nzSize"
[ngModel]="nzPageSize"
(ngModelChange)="onPageSizeChange($event)">
<nz-option *ngFor="let option of nzPageSizeOptions"
[nzLabel]="option + locale.items_per_page"
[nzValue]="option">
[nzLabel]="option + locale.items_per_page"
[nzValue]="option">
</nz-option>
<nz-option *ngIf="showAddOption"
[nzLabel]="nzPageSize + locale.items_per_page"
[nzValue]="nzPageSize">
[nzLabel]="nzPageSize + locale.items_per_page"
[nzValue]="nzPageSize">
</nz-option>
</nz-select>
<div class="ant-pagination-options-quick-jumper" *ngIf="nzShowQuickJumper">
{{ locale.jump_to }}
<input #quickJumperInput (keydown.enter)="handleKeyDown($event,quickJumperInput,true)">
<input #quickJumperInput
[disabled]="nzDisabled"
(keydown.enter)="handleKeyDown($event,quickJumperInput,true)">
{{ locale.page }}
</div>
</div>
@@ -51,6 +51,7 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
$implicit: 'page' | 'prev' | 'next';
page: number;
}>;
@Input() @InputBoolean() nzDisabled = false;
@Input() @InputBoolean() nzShowSizeChanger = false;
@Input() @InputBoolean() nzHideOnSinglePage = false;
@Input() @InputBoolean() nzShowQuickJumper = false;
@@ -80,7 +81,7 @@ export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
}

jumpPage(index: number): void {
if (index !== this.nzPageIndex) {
if (index !== this.nzPageIndex && !this.nzDisabled) {
const pageIndex = this.validatePageIndex(index);
if (pageIndex !== this.nzPageIndex) {
this.updatePageIndexValue(pageIndex);
@@ -198,6 +198,13 @@ describe('pagination', () => {
expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(1);
expect(testComponent.pageIndex).toBe(5);
});
it('should nzDisabled work', () => {
fixture.detectChanges();
testComponent.disabled = true;
fixture.detectChanges();
console.log(paginationElement.classList);
expect(paginationElement.classList.contains('ant-pagination-disabled')).toBe(true);
});
});
describe('simple mode', () => {
beforeEach(() => {
@@ -303,6 +310,7 @@ describe('pagination', () => {
<nz-pagination
[nzSimple]="simple"
[(nzPageIndex)]="pageIndex"
[nzDisabled]="disabled"
(nzPageIndexChange)="pageIndexChange($event)"
[(nzPageSize)]="pageSize"
(nzPageSizeChange)="pageSizeChange($event)"
@@ -321,6 +329,7 @@ export class NzTestPaginationComponent {
pageIndex = 1;
pageSize = 10;
total = 50;
disabled = false;
pageIndexChange = jasmine.createSpy('pageIndexChange callback');
pageSizeChange = jasmine.createSpy('pageSizeChange callback');
showQuickJumper = false;

0 comments on commit 141bef8

Please sign in to comment.
You can’t perform that action at this time.