PrimeNg Paginator Example
Today, I want to talk about PrimeNg Pagination. I will give you an example of PrimeNg Paginator. First we must add this code to our ts file.
1 2 3 4 5 |
import {PaginatorModule} from 'primeng/paginator'; . . . // service code to fill the data |
Then we can just add this code to html page. We will show rows per page options with a dropdown and total records means number of total records. At the same time rows stands for data count to display in a page.
1 2 3 |
<div class="content-section implementation "> <p-paginator [rows]="10" [totalRecords]="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator> </div> |
If you would like to add custom text message to the footer, you can do it like this.
1 |
<p-footer>Total Hits:{{totalHits}}</p-footer> |
Also you can use the feature lazy mode in order to deal with large datasets. Using lazy mode speeds your page. You can do it with this example html code.
1 2 3 4 5 6 |
<p-dataTable [value]="cars" [lazy]="true" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[5,10,20]" [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)"> <p-header>List of Cars</p-header> <p-column field="vin" header="Vin"></p-column> <p-column field="year" header="Year"></p-column> </p-dataTable> |
And this is the .ts file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
export class DataTableLazyDemo implements OnInit { datasource: Car[]; cars: Car[]; totalRecords: number; constructor(private carService: CarService) { } ngOnInit() { //datasource imitation this.carService.getCarsLarge().then(cars => { this.datasource = cars; this.totalRecords = this.datasource.length; this.cars = this.datasource.slice(0, 10); }); } loadCarsLazy(event: LazyLoadEvent) { //in a real application, make a remote request to load data using state metadata from event //event.first = First row offset //event.rows = Number of rows per page //event.sortField = Field name to sort with //event.sortOrder = Sort order as number, 1 for asc and -1 for dec //filters: FilterMetadata object having field as key and filter value, filter matchMode as value //imitate db connection over a network setTimeout(() => { if(this.datasource) { this.cars = this.datasource.slice(event.first, (event.first + event.rows)); } }, 250); } } |
You can have a look at my another post from this link New Features In .Net Core 3.0
Recent Comments