Свойства пагинатора Angular PrimeNG

Опубликовано: 24 Февраля, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать свойства Paginator в Angular PrimeNG.

Компонент Paginator используется для отображения содержимого в постраничном формате. Свойства пагинатора перечислены ниже.

Синтаксис:

<p-paginator></p-paginator>

Свойства пейджера:

totalRecords: общее количество отображаемых страниц записей. Это числовой тип данных, значение по умолчанию равно 0.
rows: это количество данных для отображения на странице. Это числовой тип данных, значение по умолчанию равно 0.
first: это относительный к нулю номер первой отображаемой строки. Это числовой тип данных, значение по умолчанию равно 0.
pageLinkSize: устанавливает количество отображаемых ссылок на страницы. Это числовой тип данных, значение по умолчанию равно 5.
rowsPerPageOptions: это массив значений целых чисел/объектов для отображения в раскрывающемся списке строк на страницу. Это тип данных массива, значение по умолчанию равно null.
стиль: это встроенный стиль компонента. Это строковый тип данных, значение по умолчанию равно null.
styleClass: это класс стиля компонента. Это строковый тип данных, значение по умолчанию равно null.
alwaysShow: указывает, показывать ли его, даже если есть только одна страница. Это логический тип данных, и значение по умолчанию — true.
showFirstLastIcon: показывает, что значки отображаются в пагинаторе для перехода на первую и последнюю страницу. Это логический тип данных, и значение по умолчанию — true.
templateLeft: это экземпляр шаблона для вставки в левую часть пагинатора. Это тип данных TemplateRef, значение по умолчанию равно null.
templateRight: это экземпляр шаблона для вставки в правую часть пагинатора. Это тип данных TemplateRef, значение по умолчанию равно null.
dropdownItemTemplate: это экземпляр шаблона для вставки в раскрывающийся элемент внутри пагинатора. Это тип данных TemplateRef, значение по умолчанию равно null.
dropdownAppendTo: это целевой элемент для прикрепления раскрывающегося наложения. Он может принимать данные любого типа, а значение по умолчанию равно null.
dropdownScrollHeight: это высота раскрывающегося списка в пикселях, полоса прокрутки определяется, если высота списка превышает это значение. Это строковый тип данных, значение по умолчанию — 200 пикселей.
currentPageReportTemplate: это шаблон элемента отчета текущей страницы. Это строковый тип данных, значение по умолчанию — ({currentPage} из {totalPages}).
showCurrentPageReport: указывает, отображать ли отчет о текущей странице. Имеет логический тип данных, значение по умолчанию — false.
showJumpToPageDropdown: указывает, отображать ли раскрывающийся список для перехода на любую страницу. Имеет логический тип данных, значение по умолчанию — false.
showPageLinks: указывает, показывать ли ссылки на страницы. Это логический тип данных, и значение по умолчанию — true.
События:
onPageChange: это обратный вызов, который запускается при изменении страницы в элементе.

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Это будет выглядеть следующим образом:

Пример 1. В приведенном ниже коде мы будем использовать вышеуказанные свойства для демонстрации использования свойств Paginator.

приложение.component.html:

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Paginator Properties</h4>
    <p-paginator [rows]="5" [totalRecords]="10"></p-paginator>
</div>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    constructor(private primengConfig: PrimeNGConfig) { }
  
    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from 
    "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { PaginatorModule } from "primeng/paginator";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        PaginatorModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

Выход:

Пример 2: в приведенном ниже коде мы будем использовать вышеуказанные свойства для демонстрации использования свойств Paginator.

приложение.component.html:

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Paginator Properties</h4>
    <p-paginator [rows]="5" [totalRecords]="10" 
        showCurrentPageReport="true" 
        alwaysShow="true" 
        showFirstLastIcon="true"
        showJumpToPageDropdown="true">
    </p-paginator>
</div>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    constructor(private primengConfig: PrimeNGConfig) { }
  
    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from 
    "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { PaginatorModule } from "primeng/paginator";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        PaginatorModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

Выход:

Ссылка: https://www.primefaces.org/primeng/paginator

Technical Scripter Picked AngularJS

Свойства пагинатора Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ