素ng数据表:如何自定义分页

Question

上下文

我在我的角度项目中使用Prime-ng Datatable模块。我可以使用datatable属性[paginator]="true"进行分页。我没有问题的数据和浏览器显示我的内容非常好。此外，我可以自定义我的分页的样式和datatable的样式，我对此也没有问题。

现在我的分页是这样的：电流分页

问题(或机会)

我想要一种不同的分页。理想情况下，我更喜欢从总页数中显示当前页面的分页。就像我说的，我使用[paginator]属性，但是我看不到任何可以用来创建我想要的东西的属性。

我是否可以将分页导航的箭头更改为“第一页”和“最后一页”标签？

APP.COMPONENT.HTML

我为datatable使用了所有属性。

 <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;
}

Answer 1

有点老了，但给你

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

Answer 2

我认为您需要的是pTemplate=“分页器”，但是此时，在p表文档中没有任何关于这一点的内容。我相信您只使用样式和分页左和分页右模板来自定义p-table组件中的模板。

我不知道下一个解决方案是否有效，我认为您可以使用p-table的页脚放入分页器，并使用样式和网格创建自定义分页器。此解决方案存在实现页面更改方法所需的问题。

分页器样式位于分页器页de primeng (https://www.primefaces.org/primeng/#/paginator)中。

我希望能帮助你