d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    Component,
    OnInit,
    ChangeDetectionStrategy,
    Input,
    Output,
    EventEmitter,
    ChangeDetectorRef,
    HostBinding,
    Optional,
    Inject,
    TemplateRef
} from '@angular/core';
import { ThyPaginationConfigModel } from './pagination.class';
import { PaginationDefaultConfig, DEFAULT_RANGE_COUNT, THY_PAGINATION_CONFIG, ThyPaginationConfig } from './pagination.config';
import { useHostRenderer } from '@tethys/cdk/dom';
import { isTemplateRef } from 'ngx-tethys/util';
import { PaginationTotalCountFormat } from './pagination.pipe';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { ThyOptionComponent, ThyEnterDirective } from 'ngx-tethys/shared';
import { FormsModule } from '@angular/forms';
import { ThySelectCustomComponent } from 'ngx-tethys/select';
import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
import { InputBoolean, InputNumber } from 'ngx-tethys/core';

/**
 * 分页组件，当数据量过多时，使用分页分解数据。
 * @name thy-pagination
 * @order 10
 */
@Component({
    selector: 'thy-pagination',
    templateUrl: './pagination.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [
        NgIf,
        NgTemplateOutlet,
        ThySelectCustomComponent,
        FormsModule,
        NgFor,
        ThyOptionComponent,
        ThyIconComponent,
        ThyEnterDirective,
        PaginationTotalCountFormat
    ]
})
export class ThyPaginationComponent implements OnInit {
    isTemplateRef = isTemplateRef;
    public config: ThyPaginationConfigModel = Object.assign({}, PaginationDefaultConfig, this.paginationConfig.main);

    /**
     * 设置当前页，支持双向绑定
     * @default 1
     */
    @Input()
    @InputNumber()
    set thyPageIndex(pageIndex: number) {
        this.pageIndex = pageIndex;
        if (this.initialized) {
            this.setPageIndex(pageIndex);
        }
    }

    /**
     * 每页条目数量
     * @default 20
     */
    @Input()
    @InputNumber()
    set thyPageSize(pageSize: number) {
        this.pageSize = pageSize;
        this.selectPageSize = pageSize;
        if (this.initialized) {
            this.calculatePageCount();
            this.initializePages(this.pageIndex, this.pageCount);
            this.cdr.markForCheck();
        }
    }

    /**
     * 总页数 与 totalPages 二选一传入
     */
    @Input()
    @InputNumber()
    set thyTotal(total: number) {
        this.total = total;
        if (this.initialized) {
            this.calculatePageCount();
            this.setPageIndex(this.pageIndex);
            this.cdr.markForCheck();
        }
    }

    /**
     * 自定义分页页码，设置自定义分页页码后将不根据 Total 和 PageSize 来自动计算页码，完全以传入的页码为准
     * @type number[]
     */
    @Input()
    set thyCustomPages(pages: number[]) {
        this.customPages = pages;
        this.config.showTotalPageCount = false;
        if (this.initialized) {
            this.calculatePageCount();
            this.initializePages(this.pageIndex, this.pageCount);
            this.cdr.markForCheck();
        }
    }

    /**
     * 是否禁用
     */
    @Input('thyDisabled') @InputBoolean() disabled = false;

    /**
     * 是否显示快速跳转
     * @default false
     */
    @Input('thyShowQuickJumper')
    @InputBoolean()
    set showQuickJumper(value: boolean) {
        this.config.showQuickJumper = value;
    }

    /**
     * 设置是否显示总页数信息
     * @default true
     */
    @Input('thyShowTotalPageCount')
    @InputBoolean()
    set showTotalPageCount(value: boolean) {
        this.config.showTotalPageCount = value;
    }

    /**
     * 设置分页组件的大小
     * @type sm | md | lg
     * @default md
     */
    @Input('thySize')
    set size(size: 'sm' | 'md' | 'lg') {
        this.selectSize = size;
        this.hostRenderer.addClass(`thy-pagination-${size}`);
    }

    /**
     * 设置最大显示数量，超出最大显示数后会自动进行分割显示
     * @default 9
     */
    @Input('thyMaxCount')
    @InputNumber()
    set maxCount(value: number) {
        this.config.maxCount = value;
    }

    /**
     * 设置边缘显示数量
     * @default 2
     */
    @Input('thyMarginalCount') @InputNumber() marginalCount: number;

    /**
     * 设置中间区域显示数量
     * @default 7
     */
    @Input()
    @InputNumber()
    set thyRangeCount(value: number) {
        if (Number.isInteger(value)) {
            this.config.rangeCount = value;
            if (this.initialized) {
                this.setMarginalCount(value);
            }
        }
    }

    @Input('thyShowSizeChanger')
    @InputBoolean()
    set showSizeChanger(value: boolean) {
        this.config.showSizeChanger = value;
    }

    /**
     * @type number[]
     */
    @Input('thyPageSizeOptions')
    set pageSizeOptions(value: number[]) {
        this.config.pageSizeOptions = value;
    }

    /**
     * 只有一页时是否隐藏分页器
     * @default false
     */
    @Input('thyHideOnSinglePage') @InputBoolean() hideOnSinglePage: boolean;

    /**
     * 页码改变的回调
     */
    @Output('thyPageIndexChange') pageIndexChange = new EventEmitter<number>();

    /**
     * 与Bootstrap pagination 兼容，后续版本会进行删除，参数保持与 bootstrap 一致
     */
    @Output('thyPageChanged') pageChanged = new EventEmitter<{ page: number }>();

    @Output('thyPageSizeChanged') pageSizeChanged = new EventEmitter<number>();

    public pages: { index?: number; text?: string; active?: boolean }[] = [];

    public pageIndex = 1;

    public pageSize: number;

    public pageCount: number;

    public customPages: number[];

    public total: number;

    public range = { from: 0, to: 0 };

    public firstIndex = 1;

    public isHideOnSinglePage = false;

    private initialized = false;

    private hostRenderer = useHostRenderer();

    public selectSize = 'md';

    public selectPageSize: Number = 20;

    @HostBinding('class.thy-pagination') isPaginationClass = true;

    /**
     * 是否显示范围和total
     * @default false
     */
    @HostBinding('class.thy-pagination-has-total')
    @Input('thyShowTotal')
    showTotal: boolean | TemplateRef<{ $implicit: number; range: { from: number; to: number } }> = false;

    constructor(
        @Optional()
        @Inject(THY_PAGINATION_CONFIG)
        private paginationConfig: ThyPaginationConfig,
        private cdr: ChangeDetectorRef
    ) {}

    ngOnInit() {
        this.setMarginalCount(this.config.rangeCount);
        this.calculatePageCount();
        this.setPageIndex(this.pageIndex);
        this.initialized = true;
    }

    private setMarginalCount(range: number) {
        if (!this.marginalCount) {
            this.marginalCount = range <= DEFAULT_RANGE_COUNT ? 1 : 2;
        }
    }

    private setPageIndex(pageIndex: number) {
        this.pageIndex = pageIndex > this.pageCount ? this.pageCount : pageIndex || 1;
        const toPageSize = this.pageIndex * this.pageSize;
        this.range = {
            from: (this.pageIndex - 1) * this.pageSize + 1,
            to: toPageSize > this.total ? this.total : toPageSize
        };
        this.initializePages(this.pageIndex, this.pageCount);
        this.cdr.markForCheck();
    }

    private calculatePageCount() {
        let pageCount = null;
        if (this.customPages && this.customPages.length > 0) {
            pageCount = this.customPages[this.customPages.length - 1];
        } else {
            pageCount = this.pageSize < 1 ? 1 : Math.ceil(this.total / this.pageSize);
        }
        this.pageCount = Math.max(pageCount || 0, 1);
    }

    private makePage(index: number, text: string, active: boolean): { index: number; text: string; active: boolean } {
        return { index, text, active };
    }

    private initializePages(pageIndex: number, pageCount: number) {
        if (this.customPages && this.customPages.length > 0) {
            this.pages = this.customPages.map(page => {
                return {
                    index: page,
                    text: page.toString(),
                    active: page === +pageIndex
                };
            });
            return;
        }

        let pages = [];
        const marginalCount = this.marginalCount;
        const rangeCount = this.config.rangeCount;
        const maxCount = this.config.maxCount;
        const isMaxSized = pageCount > maxCount;
        if (isMaxSized) {
            const beforePages = [];
            const afterPages = [];

            // beforePages
            for (let i = 1; i <= marginalCount; i++) {
                beforePages.push(this.makePage(i, i.toString(), i === pageIndex));
            }
            if (pageIndex - Math.ceil(rangeCount / 2) > this.firstIndex) {
                beforePages.push(this.makePage(pageIndex - rangeCount, '···', null));
            }

            // afterPages
            if (pageIndex + Math.ceil(rangeCount / 2) < pageCount) {
                afterPages.push(this.makePage(pageIndex + rangeCount, '···', null));
            }
            for (let i = pageCount - marginalCount + 1; i <= pageCount; i++) {
                afterPages.push(this.makePage(i, i.toString(), i === pageIndex));
            }

            // mainPages
            let start = Math.max(marginalCount + 1, pageIndex - (rangeCount - 1) / 2);
            let end = Math.min(pageIndex + (rangeCount - 1) / 2, pageCount - marginalCount);
            if (pageIndex - 1 <= marginalCount) {
                end = rangeCount;
            }
            if (pageCount - pageIndex <= marginalCount) {
                start = pageCount - rangeCount + 1;
            }

            for (let i = start; i <= end; i++) {
                pages.push({
                    index: i,
                    text: i.toString(),
                    active: i === +pageIndex
                });
            }
            pages = [...beforePages, ...pages, ...afterPages];
        } else {
            for (let i = 1; i <= pageCount; i++) {
                pages.push({
                    index: i,
                    text: i.toString(),
                    active: i === +pageIndex
                });
            }
        }
        this.pages = pages;
    }

    private pageChange(pageIndex: number) {
        this.pageIndexChange.emit(pageIndex);
        this.pageChanged.emit({ page: pageIndex });
    }

    selectPage(pageIndex: number) {
        if (this.disabled || pageIndex === this.firstIndex - 1 || pageIndex === this.pageCount + 1) {
            return;
        }
        this.setPageIndex(pageIndex);
        this.pageChange(this.pageIndex);
    }

    jumpPage(input: HTMLInputElement) {
        const pageIndex = +input.value;
        if (Number.isInteger(pageIndex)) {
            this.selectPage(pageIndex);
        }
        input.value = '';
    }

    onPageSizeChange(event: number) {
        this.pageSize = event;
        this.calculatePageCount();
        this.setPageIndex(this.pageIndex);
        this.pageSizeChanged.emit(event);
    }
}

1	import {
2	Component,
3	OnInit,
4	ChangeDetectionStrategy,
5	Input,
6	Output,
7	EventEmitter,
8	ChangeDetectorRef,
9	HostBinding,
10	Optional,
11	Inject,
12	TemplateRef
13	} from '@angular/core';
14	import { ThyPaginationConfigModel } from './pagination.class';
15	import { PaginationDefaultConfig, DEFAULT_RANGE_COUNT, THY_PAGINATION_CONFIG, ThyPaginationConfig } from './pagination.config';
16	import { useHostRenderer } from '@tethys/cdk/dom';
17	import { isTemplateRef } from 'ngx-tethys/util';
18	import { PaginationTotalCountFormat } from './pagination.pipe';
19	import { ThyIconComponent } from 'ngx-tethys/icon';	1✔
20	import { ThyOptionComponent, ThyEnterDirective } from 'ngx-tethys/shared';
21	import { FormsModule } from '@angular/forms';	×
22	import { ThySelectCustomComponent } from 'ngx-tethys/select';	×
23	import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';	×
24	import { InputBoolean, InputNumber } from 'ngx-tethys/core';
25
26	/**
27	* 分页组件，当数据量过多时，使用分页分解数据。	×
28	* @name thy-pagination	×
29	* @order 10	×
30	*/	×
31	@Component({	×
32	selector: 'thy-pagination',	×
33	templateUrl: './pagination.component.html',
34	changeDetection: ChangeDetectionStrategy.OnPush,
35	standalone: true,
36	imports: [	×
37	NgIf,	×
38	NgTemplateOutlet,	×
39	ThySelectCustomComponent,	×
40	FormsModule,	×
41	NgFor,
42	ThyOptionComponent,
43	ThyIconComponent,
44	ThyEnterDirective,	×
45	PaginationTotalCountFormat	×
46	]	×
47	})	×
48	export class ThyPaginationComponent implements OnInit {	×
49	isTemplateRef = isTemplateRef;	×
50	public config: ThyPaginationConfigModel = Object.assign({}, PaginationDefaultConfig, this.paginationConfig.main);
51
52	/**
53	* 设置当前页，支持双向绑定	×
54	* @default 1
55	*/
56	@Input()	×
57	@InputNumber()
58	set thyPageIndex(pageIndex: number) {
59	this.pageIndex = pageIndex;	×
60	if (this.initialized) {	×
61	this.setPageIndex(pageIndex);
62	}
63	}	×
64
65	/**
66	* 每页条目数量	×
67	* @default 20	×
68	*/	×
69	@Input()	×
70	@InputNumber()
71	set thyPageSize(pageSize: number) {
72	this.pageSize = pageSize;
73	this.selectPageSize = pageSize;
74	if (this.initialized) {	×
75	this.calculatePageCount();
76	this.initializePages(this.pageIndex, this.pageCount);
77	this.cdr.markForCheck();	×
78	}
79	}
80		×
81	/**	×
82	* 总页数与 totalPages 二选一传入	×
83	*/	×
84	@Input()	×
85	@InputNumber()	×
86	set thyTotal(total: number) {	×
87	this.total = total;	×
88	if (this.initialized) {	×
89	this.calculatePageCount();	×
90	this.setPageIndex(this.pageIndex);	×
91	this.cdr.markForCheck();	×
92	}	×
93	}	×
94		×
95	/**	×
96	* 自定义分页页码，设置自定义分页页码后将不根据 Total 和 PageSize 来自动计算页码，完全以传入的页码为准	×
97	* @type number[]	×
98	*/	×
99	@Input()
100	set thyCustomPages(pages: number[]) {
101	this.customPages = pages;	×
102	this.config.showTotalPageCount = false;	×
103	if (this.initialized) {	×
104	this.calculatePageCount();	×
105	this.initializePages(this.pageIndex, this.pageCount);
106	this.cdr.markForCheck();
107	}	×
108	}	×
109
110	/**
111	* 是否禁用
112	*/	×
113	@Input('thyDisabled') @InputBoolean() disabled = false;	×
114		×
115	/**
116	* 是否显示快速跳转	×
117	* @default false
118	*/	×
119	@Input('thyShowQuickJumper')	×
120	@InputBoolean()
121	set showQuickJumper(value: boolean) {
122	this.config.showQuickJumper = value;	×
123	}	×
124		×
125	/**
126	* 设置是否显示总页数信息
127	* @default true	×
128	*/
129	@Input('thyShowTotalPageCount')	×
130	@InputBoolean()
131	set showTotalPageCount(value: boolean) {
132	this.config.showTotalPageCount = value;	×
133	}
134
135	/**	×
136	* 设置分页组件的大小	×
137	* @type sm \| md \| lg	×
138	* @default md
139	*/
140	@Input('thySize')
141	set size(size: 'sm' \| 'md' \| 'lg') {
142	this.selectSize = size;
143	this.hostRenderer.addClass(`thy-pagination-${size}`);	×
144	}
145		×
146	/**	×
147	* 设置最大显示数量，超出最大显示数后会自动进行分割显示	×
148	* @default 9	×
149	*/	×
150	@Input('thyMaxCount')	×
151	@InputNumber()	×
152	set maxCount(value: number) {	×
153	this.config.maxCount = value;
154	}	×
155		×
156	/**
157	* 设置边缘显示数量	×
158	* @default 2	×
159	*/
160	@Input('thyMarginalCount') @InputNumber() marginalCount: number;
161		×
162	/**	×
163	* 设置中间区域显示数量
164	* @default 7	×
165	*/	×
166	@Input()
167	@InputNumber()
168	set thyRangeCount(value: number) {	×
169	if (Number.isInteger(value)) {	×
170	this.config.rangeCount = value;	×
171	if (this.initialized) {	×
172	this.setMarginalCount(value);
173	}	×
174	}	×
175	}
176		×
177	@Input('thyShowSizeChanger')	×
178	@InputBoolean()
179	set showSizeChanger(value: boolean) {
180	this.config.showSizeChanger = value;
181	}
182
183	/**	×
184	* @type number[]
185	*/
186	@Input('thyPageSizeOptions')	×
187	set pageSizeOptions(value: number[]) {	×
188	this.config.pageSizeOptions = value;
189	}
190
191	/**
192	* 只有一页时是否隐藏分页器
193	* @default false
194	*/	×
195	@Input('thyHideOnSinglePage') @InputBoolean() hideOnSinglePage: boolean;
196
197	/**	×
198	* 页码改变的回调	×
199	*/
200	@Output('thyPageIndexChange') pageIndexChange = new EventEmitter<number>();
201		×
202	/**	×
203	* 与Bootstrap pagination 兼容，后续版本会进行删除，参数保持与 bootstrap 一致
204	*/	×
205	@Output('thyPageChanged') pageChanged = new EventEmitter<{ page: number }>();	×
206
207	@Output('thyPageSizeChanged') pageSizeChanged = new EventEmitter<number>();
208		×
209	public pages: { index?: number; text?: string; active?: boolean }[] = [];	×
210		×
211	public pageIndex = 1;
212		×
213	public pageSize: number;
214
215	public pageCount: number;	×
216		×
217	public customPages: number[];	×
218		×
219	public total: number;
220		1✔
221	public range = { from: 0, to: 0 };
222
223	public firstIndex = 1;
224		1✔
225	public isHideOnSinglePage = false;
226
227	private initialized = false;
228
229	private hostRenderer = useHostRenderer();
230
231	public selectSize = 'md';
232
233	public selectPageSize: Number = 20;
234
235	@HostBinding('class.thy-pagination') isPaginationClass = true;
236
237	/**
238	* 是否显示范围和total
239	* @default false
240	*/
241	@HostBinding('class.thy-pagination-has-total')
242	@Input('thyShowTotal')
243	showTotal: boolean \| TemplateRef<{ $implicit: number; range: { from: number; to: number } }> = false;
244
245	constructor(
246	@Optional()	1✔
247	@Inject(THY_PAGINATION_CONFIG)
248	private paginationConfig: ThyPaginationConfig,
249	private cdr: ChangeDetectorRef
250	) {}
251		1✔
252	ngOnInit() {
253	this.setMarginalCount(this.config.rangeCount);
254	this.calculatePageCount();
255	this.setPageIndex(this.pageIndex);
256	this.initialized = true;	1✔
257	}
258
259	private setMarginalCount(range: number) {
260	if (!this.marginalCount) {
261	this.marginalCount = range <= DEFAULT_RANGE_COUNT ? 1 : 2;	1✔
262	}
263	}
264
265	private setPageIndex(pageIndex: number) {	1✔
266	this.pageIndex = pageIndex > this.pageCount ? this.pageCount : pageIndex \|\| 1;
267	const toPageSize = this.pageIndex * this.pageSize;
268	this.range = {
269	from: (this.pageIndex - 1) * this.pageSize + 1,
270	to: toPageSize > this.total ? this.total : toPageSize	1✔
271	};
272	this.initializePages(this.pageIndex, this.pageCount);
273	this.cdr.markForCheck();
274	}
275		1✔
276	private calculatePageCount() {
277	let pageCount = null;
278	if (this.customPages && this.customPages.length > 0) {
279	pageCount = this.customPages[this.customPages.length - 1];
280	} else {	1✔
281	pageCount = this.pageSize < 1 ? 1 : Math.ceil(this.total / this.pageSize);
282	}
283	this.pageCount = Math.max(pageCount \|\| 0, 1);
284	}	1✔
285
286	private makePage(index: number, text: string, active: boolean): { index: number; text: string; active: boolean } {
287	return { index, text, active };
288	}
289		1✔
290	private initializePages(pageIndex: number, pageCount: number) {
291	if (this.customPages && this.customPages.length > 0) {
292	this.pages = this.customPages.map(page => {
293	return {
294	index: page,	1✔
295	text: page.toString(),
296	active: page === +pageIndex
297	};
298	});	1✔
299	return;
300	}
301
302	let pages = [];
303	const marginalCount = this.marginalCount;
304	const rangeCount = this.config.rangeCount;
305	const maxCount = this.config.maxCount;
306	const isMaxSized = pageCount > maxCount;
307	if (isMaxSized) {
308	const beforePages = [];
309	const afterPages = [];
310
311	// beforePages
312	for (let i = 1; i <= marginalCount; i++) {
313	beforePages.push(this.makePage(i, i.toString(), i === pageIndex));
314	}
315	if (pageIndex - Math.ceil(rangeCount / 2) > this.firstIndex) {
316	beforePages.push(this.makePage(pageIndex - rangeCount, '···', null));
317	}
318
319	// afterPages
320	if (pageIndex + Math.ceil(rangeCount / 2) < pageCount) {
321	afterPages.push(this.makePage(pageIndex + rangeCount, '···', null));
322	}
323	for (let i = pageCount - marginalCount + 1; i <= pageCount; i++) {
324	afterPages.push(this.makePage(i, i.toString(), i === pageIndex));
325	}
326
327	// mainPages
328	let start = Math.max(marginalCount + 1, pageIndex - (rangeCount - 1) / 2);
329	let end = Math.min(pageIndex + (rangeCount - 1) / 2, pageCount - marginalCount);
330	if (pageIndex - 1 <= marginalCount) {
331	end = rangeCount;
332	}
333	if (pageCount - pageIndex <= marginalCount) {
334	start = pageCount - rangeCount + 1;
335	}
336
337	for (let i = start; i <= end; i++) {
338	pages.push({
339	index: i,
340	text: i.toString(),
341	active: i === +pageIndex
342	});
343	}
344	pages = [...beforePages, ...pages, ...afterPages];
345	} else {
346	for (let i = 1; i <= pageCount; i++) {
347	pages.push({
348	index: i,
349	text: i.toString(),
350	active: i === +pageIndex
351	});
352	}
353	}
354	this.pages = pages;
355	}
356
357	private pageChange(pageIndex: number) {
358	this.pageIndexChange.emit(pageIndex);
359	this.pageChanged.emit({ page: pageIndex });
360	}
361
362	selectPage(pageIndex: number) {
363	if (this.disabled \|\| pageIndex === this.firstIndex - 1 \|\| pageIndex === this.pageCount + 1) {
364	return;
365	}
366	this.setPageIndex(pageIndex);
367	this.pageChange(this.pageIndex);
368	}
369
370	jumpPage(input: HTMLInputElement) {
371	const pageIndex = +input.value;
372	if (Number.isInteger(pageIndex)) {
373	this.selectPage(pageIndex);
374	}
375	input.value = '';
376	}
377
378	onPageSizeChange(event: number) {
379	this.pageSize = event;
380	this.calculatePageCount();
381	this.setPageIndex(this.pageIndex);
382	this.pageSizeChanged.emit(event);
383	}
384	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous