prime-ng 數據表：如何自定義分頁

Question

語境

我在 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
  >

數據表.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;
}

Answer 1

有點舊，但是給你

<ng-template pTemplate="paginatorright" let-state>
            {{state | json}}
          </ng-template>

Answer 2

我認為您想要像 pTemplate="paginator" 這樣的東西，但此時，p-table 文檔中沒有關於此的任何內容。 我相信您只使用樣式和 paginatorleft 和 paginatorright 模板來自定義 p-table 組件中的模板。

我不知道下一個解決方案是否有效，我認為您可以使用 p-table 的頁腳放入分頁器並使用樣式和網格來制作自定義分頁器。 該方案存在需要實現換頁方法的問題。

分頁器樣式在分頁器頁面 de primeng ( https://www.primefaces.org/primeng/#/paginator ) 中。

我希望能幫助你