PrimeNG Tutorial - DataTable Pagination (Paginator) Example








PrimeNG Tutorial - DataTable Pagination (Paginator) Example


Overview

In previous tutorial we had implemented PrimeNG Tutorial - DataTable Dynamic Columns Example to display the datatable when the number of columns are dynamic and not known to the user. We will be modifying the example to enable pagination.

Table Of Contents :


Video Tutorial

Implementation

  • In previous tutorial we had implemented PrimeNG Datatable component with dynamic columns. If we run the application and go to localhost:4200/books we get the following book list-
    PrimeNG DataTable
  • Suppose now we have a large amount of data, so the number of rows will also increase. For this we modify the books.json that we have in the assets folder which holds all our records. We will be adding more records to it.
    {
        "data": [
            {"name": "The Godfather", "price": 10, "author": "Mario Puzo"},
            {"name": "The Fellowship of the Ring", "price": 15, "author": "J.R.R. Tolkien"},
            {"name": "Harry Potter and the Deathly Hallows", "price": 20, "author": "J.K. Rowling  "},
            {"name": "book1", "price": 20, "author": "author1  "}, 
            {"name": "book2", "price": 20, "author": "author2  "}, 
            {"name": "book3", "price": 20, "author": "author3  "}, 
            {"name": "book4", "price": 20, "author": "author4  "}, 
            {"name": "book5", "price": 20, "author": "author5  "}, 
            {"name": "book6", "price": 20, "author": "author6  "}, 
            {"name": "book7", "price": 20, "author": "author7  "}, 
            {"name": "book8", "price": 20, "author": "author8  "}, 
            {"name": "book9", "price": 20, "author": "author9  "}, 
            {"name": "book10", "price": 20, "author": "author10  "}, 
            {"name": "book11", "price": 20, "author": "author11  "}, 
            {"name": "book12", "price": 20, "author": "author12  "},     
            {"name": "book13", "price": 20, "author": "author13  "}, 
            {"name": "book14", "price": 20, "author": "author14  "}, 
            {"name": "book15", "price": 20, "author": "author15  "}, 
            {"name": "book16", "price": 20, "author": "author16  "}, 
            {"name": "book17", "price": 20, "author": "author17  "}, 
            {"name": "book18", "price": 20, "author": "author18  "}, 
            {"name": "book19", "price": 20, "author": "author19  "}, 
            {"name": "book20", "price": 20, "author": "author20  "},
            {"name": "book1", "price": 20, "author": "author1  "}, 
            {"name": "book2", "price": 20, "author": "author2  "}, 
            {"name": "book3", "price": 20, "author": "author3  "}, 
            {"name": "book4", "price": 20, "author": "author4  "}, 
            {"name": "book5", "price": 20, "author": "author5  "}, 
            {"name": "book6", "price": 20, "author": "author6  "}, 
            {"name": "book7", "price": 20, "author": "author7  "}, 
            {"name": "book8", "price": 20, "author": "author8  "}, 
            {"name": "book9", "price": 20, "author": "author9  "}, 
            {"name": "book10", "price": 20, "author": "author10  "}, 
            {"name": "book11", "price": 20, "author": "author11  "}, 
            {"name": "book12", "price": 20, "author": "author12  "},     
            {"name": "book13", "price": 20, "author": "author13  "}, 
            {"name": "book14", "price": 20, "author": "author14  "}, 
            {"name": "book15", "price": 20, "author": "author15  "}, 
            {"name": "book16", "price": 20, "author": "author16  "}, 
            {"name": "book17", "price": 20, "author": "author17  "}, 
            {"name": "book18", "price": 20, "author": "author18  "}, 
            {"name": "book19", "price": 20, "author": "author19  "}, 
            {"name": "book20", "price": 20, "author": "author20  "},
            {"name": "book1", "price": 20, "author": "author1  "}, 
            {"name": "book2", "price": 20, "author": "author2  "}, 
            {"name": "book3", "price": 20, "author": "author3  "}, 
            {"name": "book4", "price": 20, "author": "author4  "}, 
            {"name": "book5", "price": 20, "author": "author5  "}, 
            {"name": "book6", "price": 20, "author": "author6  "}, 
            {"name": "book7", "price": 20, "author": "author7  "}, 
            {"name": "book8", "price": 20, "author": "author8  "}, 
            {"name": "book9", "price": 20, "author": "author9  "}, 
            {"name": "book10", "price": 20, "author": "author10  "}, 
            {"name": "book11", "price": 20, "author": "author11  "}, 
            {"name": "book12", "price": 20, "author": "author12  "},     
            {"name": "book13", "price": 20, "author": "author13  "}, 
            {"name": "book14", "price": 20, "author": "author14  "}, 
            {"name": "book15", "price": 20, "author": "author15  "}, 
            {"name": "book16", "price": 20, "author": "author16  "}, 
            {"name": "book17", "price": 20, "author": "author17  "}, 
            {"name": "book18", "price": 20, "author": "author18  "}, 
            {"name": "book19", "price": 20, "author": "author19  "}, 
            {"name": "book20", "price": 20, "author": "author20  "} 
        ]
    }
    
    If we now go to localhost:4200/books, we can see this does not look good. We will now be implementing Pagination by setting paginator property to true and defining a rows property to specify the number of rows per page

    PrimeNG DataTable Pagination Example
    In the book data component page define a backing object named totalRecords. This will be of type number and will hold the total number of records we have to display in the datatable.
    import { Component, OnInit } from '@angular/core';
    import { BookService, Book } from '../service/book.service';
    
    @Component({
      selector: 'app-book-data',
      templateUrl: './book-data.component.html',
      styleUrls: ['./book-data.component.css']
    })
    export class BookDataComponent implements OnInit {
    
      books: Book[];
    
      cols: any[];
      
      totalRecords: number;
    
      constructor(private bookService: BookService) { }
    
      ngOnInit() {
          this.bookService.getBooks().
          then(books => this.books = books);
    
          this.cols = [
            { field: 'name', header: 'Name' },
            {field: 'author', header: 'Author' },
            { field: 'price', header: 'Price' }      
        ];
        
        this.totalRecords=this.books.length;
      }
    
    }
    
  • Next we adding the following attributes for the datatable-
    • paginator - We set the paginate property to true to enable Pagination for the datatable
    • rows - We define how many rows should be displayed per page.
    • rowsPerPageOptions - Allow the user to choose the number of rows he wants per page.
    • totalRecords - The total number of records the data table will hold. We defined this backing object above.
    • pageLinks - Show the number of Pagination links.
    <p-table [columns]="cols" [value]="books" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5,10,15,20]"
      totalRecords="totalRecords" pageLinks="3">
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th *ngFor="let col of columns">
            {{col.header}}
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
          <td *ngFor="let col of columns">
            {{rowData[col.field]}}
          </td>
        </tr>
      </ng-template>
    </p-table>
    
  • Also for the rowsPerPageOptions to work properly we will need to add the BrowserAnimationsModule in app.module.ts.
    If we now go to - localhost:4200/books we see the following-
    PrimeNG DataTable - Paginator Example

Downloads-

PrimeNG DataTable Pagination (Paginator) Example