diff --git a/src/pagination/pagination.spec.ts b/src/pagination/pagination.spec.ts
index 576262d1f7..0ccee67132 100644
--- a/src/pagination/pagination.spec.ts
+++ b/src/pagination/pagination.spec.ts
@@ -440,7 +440,7 @@ describe('ngb-pagination', () => {
fixture.componentInstance.page = 4;
fixture.detectChanges();
- expectPages(fixture.nativeElement, ['«', '1', '-...', '3', '+4', '5', '-...', '7', '»']);
+ expectPages(fixture.nativeElement, ['«', '1', '2', '3', '+4', '5', '6', '7', '»']);
fixture.componentInstance.page = 5;
fixture.detectChanges();
@@ -461,6 +461,60 @@ describe('ngb-pagination', () => {
expectPages(fixture.nativeElement, ['«', '1', '2', '3', '4', '+5', '6', '7', '»']);
});
+ it('should use page number instead of ellipsis when ellipsis hides a single page', () => {
+ const html = ``;
+ const fixture = createTestComponent(html);
+
+ fixture.componentInstance.page = 1;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['-«', '+1', '2', '3', '4', '5', '-...', '12', '»']);
+
+ fixture.componentInstance.page = 2;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '+2', '3', '4', '5', '-...', '12', '»']);
+
+ fixture.componentInstance.page = 3;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '2', '+3', '4', '5', '-...', '12', '»']);
+
+ fixture.componentInstance.page = 4;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '2', '3', '+4', '5', '6', '-...', '12', '»']);
+
+ fixture.componentInstance.page = 5;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '2', '3', '4', '+5', '6', '7', '-...', '12', '»']);
+
+ fixture.componentInstance.page = 6;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '-...', '4', '5', '+6', '7', '8', '-...', '12', '»']);
+
+ fixture.componentInstance.page = 7;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '-...', '5', '6', '+7', '8', '9', '-...', '12', '»']);
+
+ fixture.componentInstance.page = 8;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '-...', '6', '7', '+8', '9', '10', '11', '12', '»']);
+
+ fixture.componentInstance.page = 9;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '-...', '7', '8', '+9', '10', '11', '12', '»']);
+
+ fixture.componentInstance.page = 10;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '-...', '8', '9', '+10', '11', '12', '»']);
+
+ fixture.componentInstance.page = 11;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '-...', '8', '9', '10', '+11', '12', '»']);
+
+ fixture.componentInstance.page = 12;
+ fixture.detectChanges();
+ expectPages(fixture.nativeElement, ['«', '1', '-...', '8', '9', '10', '11', '+12', '-»']);
+ });
+
it('should handle edge "maxSize" values', () => {
const html = '';
const fixture = createTestComponent(html);
diff --git a/src/pagination/pagination.ts b/src/pagination/pagination.ts
index 4a4851f32f..d16508fbea 100644
--- a/src/pagination/pagination.ts
+++ b/src/pagination/pagination.ts
@@ -286,14 +286,26 @@ export class NgbPagination implements OnChanges {
private _applyEllipses(start: number, end: number) {
if (this.ellipses) {
if (start > 0) {
- if (start > 1) {
+ // The first page will always be included. If the displayed range
+ // starts after the third page, then add ellipsis. But if the range
+ // starts on the third page, then add the second page instead of
+ // an ellipsis, because the ellipsis would only hide a single page.
+ if (start > 2) {
this.pages.unshift(-1);
+ } else if (start === 2) {
+ this.pages.unshift(2);
}
this.pages.unshift(1);
}
if (end < this.pageCount) {
- if (end < (this.pageCount - 1)) {
+ // The last page will always be included. If the displayed range
+ // ends before the third-last page, then add ellipsis. But if the range
+ // ends on third-last page, then add the second-last page instead of
+ // an ellipsis, because the ellipsis would only hide a single page.
+ if (end < (this.pageCount - 2)) {
this.pages.push(-1);
+ } else if (end === (this.pageCount - 2)) {
+ this.pages.push(this.pageCount - 1);
}
this.pages.push(this.pageCount);
}