CONTEXT
我在Angular项目中使用Prime-ng Datatable模块。我可以对数据表属性[paginator]="true"进行分页。我没有数据问题，浏览器显示我的内容非常好。此外，我可以自定义我的分页风格和数据表的样式，我也没有任何问题。
这就是我的分页现在的样子：Current pagination
问题（或机会）
我想要一种不同类型的分页。理想情况下，我更喜欢在总页数中显示当前页面的分页。就像我说的，我使用[paginator]属性，但是我看不到任何可以用来创建我想要的属性。
我是否可以将分页导航的箭头更改为“首页”和“最后一页”标签？
APP.COMPONENT.HTML
我使用了数据表的所有属性。
<p-dataTable
[value]="users"
[rows]="10"
[paginator]="true"
[rowsPerPageOptions]="[5,10,20,100]"
[editable]="true"
[globalFilter]="gb"
[pageLinks]="3"
[responsive]="true"
[stacked]="stacked"
sortField="user.name"
rowGroupMode="subheader"
groupField="user.name"
expandableRowGroups="true"
[sortableRowGroup]="false"
#dt
>
DATATABLE.D.TS
export declare class DataTable implements AfterViewChecked, AfterViewInit, AfterContentInit, OnInit, OnDestroy, BlockableUI {
el: ElementRef;
domHandler: DomHandler;
renderer: Renderer;
changeDetector: ChangeDetectorRef;
objectUtils: ObjectUtils;
paginator: boolean;
rows: number;
totalRecords: number;
pageLinks: number;
rowsPerPageOptions: number[];
responsive: boolean;
stacked: boolean;
selectionMode: string;
selection: any;
selectionChange: EventEmitter<any>;
editable: boolean;
onRowClick: EventEmitter<any>;
onRowSelect: EventEmitter<any>;
onRowUnselect: EventEmitter<any>;
onRowDblclick: EventEmitter<any>;
onHeaderCheckboxToggle: EventEmitter<any>;
onContextMenuSelect: EventEmitter<any>;
filterDelay: number;
lazy: boolean;
onLazyLoad: EventEmitter<any>;
resizableColumns: boolean;
columnResizeMode: string;
onColResize: EventEmitter<any>;
reorderableColumns: boolean;
onColReorder: EventEmitter<any>;
scrollable: boolean;
virtualScroll: boolean;
scrollHeight: any;
scrollWidth: any;
frozenWidth: any;
unfrozenWidth: any;
style: any;
styleClass: string;
tableStyle: any;
tableStyleClass: string;
globalFilter: any;
sortMode: string;
sortField: string;
sortOrder: number;
groupField: string;
multiSortMeta: SortMeta[];
contextMenu: any;
csvSeparator: string;
exportFilename: string;
emptyMessage: string;
paginatorPosition: string;
metaKeySelection: boolean;
onEditInit: EventEmitter<any>;
onEditComplete: EventEmitter<any>;
onEdit: EventEmitter<any>;
onEditCancel: EventEmitter<any>;
onPage: EventEmitter<any>;
onSort: EventEmitter<any>;
onFilter: EventEmitter<any>;
header: any;
footer: any;
expandableRows: boolean;
expandedRows: any[];
expandableRowGroups: boolean;
rowExpandMode: string;
expandedRowsGroups: any[];
tabindex: number;
rowStyleClass: Function;
rowGroupMode: string;
sortableRowGroup: boolean;
sortFile: string;
rowHover: boolean;
first: number;
filters: {
[s: string]: FilterMetadata;
};
dataKey: string;
loading: boolean;
onRowExpand: EventEmitter<any>;
onRowCollapse: EventEmitter<any>;
onRowGroupExpand: EventEmitter<any>;
onRowGroupCollapse: EventEmitter<any>;
templates: QueryList<PrimeTemplate>;
cols: QueryList<Column>;
headerColumnGroup: HeaderColumnGroup;
footerColumnGroup: FooterColumnGroup;
_value: any[];
dataToRender: any[];
page: number;
filterTimeout: any;
filteredValue: any[];
columns: Column[];
frozenColumns: Column[];
scrollableColumns: Column[];
columnsChanged: boolean;
sortColumn: Column;
columnResizing: boolean;
lastResizerHelperX: number;
documentClickListener: Function;
documentColumnResizeListener: Function;
documentColumnResizeEndListener: Function;
resizerHelper: any;
resizeColumn: any;
reorderIndicatorUp: any;
reorderIndicatorDown: any;
draggedColumn: any;
dropPosition: number;
tbody: any;
rowTouched: boolean;
rowGroupToggleClick: boolean;
editingCell: any;
stopFilterPropagation: boolean;
rowGroupMetadata: any;
rowGroupHeaderTemplate: TemplateRef<any>;
rowGroupFooterTemplate: TemplateRef<any>;
rowExpansionTemplate: TemplateRef<any>;
scrollBarWidth: number;
editorClick: boolean;
globalFilterFunction: any;
columnsSubscription: Subscription;
constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer, changeDetector: ChangeDetectorRef, objectUtils: ObjectUtils);
ngOnInit(): void;
ngAfterContentInit(): void;
ngAfterViewChecked(): void;
ngAfterViewInit(): void;
value: any[];
handleDataChange(): void;
initColumns(): void;
resolveFieldData(data: any, field: string): any;
updateRowGroupMetadata(): void;
updatePaginator(): void;
paginate(event: any): void;
updateDataToRender(datasource: any): void;
onVirtualScroll(event: any): void;
onHeaderKeydown(event: any, column: Column): void;
onHeaderMousedown(event: any, header: any): void;
sort(event: any, column: Column): void;
sortSingle(): void;
sortMultiple(): void;
multisortField(data1: any, data2: any, multiSortMeta: any, index: any): any;
addSortMeta(meta: any): void;
isSorted(column: Column): boolean;
getSortOrder(column: Column): number;
onRowGroupClick(event: any): void;
handleRowClick(event: any, rowData: any): void;
handleRowTouchEnd(event: any): void;
selectRowWithRadio(event: any, rowData: any): void;
toggleRowWithCheckbox(event: any, rowData: any): void;
toggleRowsWithCheckbox(event: any): void;
onRowRightClick(event: any, rowData: any): void;
rowDblclick(event: any, rowData: any): void;
isSingleSelectionMode(): boolean;
isMultipleSelectionMode(): boolean;
findIndexInSelection(rowData: any): number;
isSelected(rowData: any): boolean;
readonly allSelected: boolean;
onFilterKeyup(value: any, field: any, matchMode: any): void;
filter(value: any, field: any, matchMode: any): void;
isFilterBlank(filter: any): boolean;
_filter(): void;
hasFilter(): any;
onFilterInputClick(event: any): void;
filterConstraints: {
startsWith(value: any, filter: any): boolean;
contains(value: any, filter: any): boolean;
endsWith(value: any, filter: any): boolean;
equals(value: any, filter: any): boolean;
in(value: any, filter: any[]): boolean;
};
switchCellToEditMode(cell: any, column: Column, rowData: any): void;
switchCellToViewMode(element: any): void;
closeCell(): void;
onCellEditorKeydown(event: any, column: Column, rowData: any, rowIndex: number): void;
moveToPreviousCell(event: KeyboardEvent): void;
moveToNextCell(event: KeyboardEvent): void;
findPreviousEditableColumn(cell: Element): any;
findNextEditableColumn(cell: Element): any;
onCustomEditorFocusPrev(event: KeyboardEvent): void;
onCustomEditorFocusNext(event: KeyboardEvent): void;
findCell(element: any): any;
initResizableColumns(): void;
initColumnResize(event: any): void;
onColumnResize(event: any): void;
onColumnResizeEnd(event: any): void;
fixColumnWidths(): void;
onColumnDragStart(event: any): void;
onColumnDragover(event: any): void;
onColumnDragleave(event: any): void;
onColumnDrop(event: any): void;
initColumnReordering(): void;
findParentHeader(element: any): any;
hasFooter(): boolean;
isEmpty(): boolean;
createLazyLoadMetadata(): LazyLoadEvent;
toggleRow(row: any, event?: Event): void;
findExpandedRowIndex(row: any): number;
isRowExpanded(row: any): boolean;
findExpandedRowGroupIndex(row: any): number;
isRowGroupExpanded(row: any): boolean;
toggleRowGroup(event: Event, row: any): void;
reset(): void;
exportCSV(): void;
getBlockableElement(): HTMLElement;
getRowStyleClass(rowData: any, rowIndex: number): string;
visibleColumns(): Column[];
readonly containerWidth: any;
ngOnDestroy(): void;
}
答案 0 :(得分：0)
有点老，但是你去了
<ng-template pTemplate="paginatorright" let-state>
{{state | json}}
</ng-template>
答案 1 :(得分：-1)
我认为您想要一些东西作为pTemplate =“ paginator”，但是目前，p表文档中对此一无所知。我相信您只能使用样式以及paginatorleft和paginatorright模板在p-table组件中自定义模板。
我不知道下一个解决方案是否有效，我认为您可以使用p表的页脚放入分页器，并使用样式和网格来创建自定义分页器。此解决方案存在您需要实现页面更改方法的问题。
分页器样式位于预分页（https://www.primefaces.org/primeng/#/paginator）的分页器页面中。
希望对您有帮助