phân trang Angular - itviec blog

Phân trang Angular có công dụng giúp quản lý và hiển thị các dữ liệu lớn một cách hiệu quả. Để thực hiện phân trang Angular, bạn sẽ cần sử dụng đến các thư viện và công cụ phổ biến như ngx-pagination và Angular Material cùng các kỹ thuật khác để tối ưu hóa trải nghiệm người dùng.

Đọc bài viết sau để được hiểu rõ hơn về: 

  • Phân trang Angular là gì?
  • Các thư viện hỗ trợ phân trang phổ biến
  • Hướng dẫn chi tiết về cách phân trang trong Angular

Phân trang Angular là gì? 

Phân trang Angular là một kỹ thuật chia nội dung có số lượng lớn thành các trang nhỏ và hiển thị chúng theo định dạng được lập chỉ mục có thứ tự. Kỹ thuật này rất phổ biến trong việc thiết kế các công cụ tìm kiếm, danh sách bài của một blog, lịch sử bình luận,.. trong đó nội dung có độ liên quan cao nhất sẽ được ưu tiên hiển thị. 

Ngoài ra, kỹ thuật phân trang được nhiều lập trình viên Angular sử dụng cùng các framework CSS như Bootstrap để tạo ra các giao diện người dùng (UI) hấp dẫn và hiện đại cho các ứng dụng Angular.

Thư viện phân trang Angular

ngx-pagination

ngx-pagination là thư viện hỗ trợ thực hiện phân trang Angular một cách đơn giản và dễ sử dụng. Thư viện này hỗ trợ nhiều thuộc tính như số lượng mục mỗi trang (itemsPerPage), trang hiện tại (currentPage) hay thay đổi một trang (pageChange). 

Để sử dụng thư viện, đầu tiên bạn cần cài đặt thư viện bằng đoạn mã npm install ngx-pagination. Tiếp theo, bạn nhập Component của @angular/core vào và sử dụng pipe paginate và component pagination-controls:

import { Component } from '@angular/core';

Ngx-pagination là một thư viện đơn giản và hiệu quả để thực hiện phân trang trong Angular. Bằng cách sử dụng pipe paginate và component pagination-controls, bạn có thể dễ dàng tạo ra các giao diện phân trang tùy chỉnh và đáp ứng nhu cầu của người dùng.

Angular Material Paginator

Angular Material sẽ cung cấp một components MatPaginator giúp bạn dễ dàng thực hiện phân trang trong ứng dụng. Thư viện này sẽ cung cấp các tính năng linh hoạt như chọn số mục mỗi trang, điều hướng trang trước, sau và hiển thị tổng số trang. 

Để bắt đầu sử dụng thư viện, đầu tiên bạn sẽ thực hiện cài đặt Angular Material qua đoạn mã ng add @angular/material. Tiếp theo nhập module theo cú pháp bên dưới và có thể sử dụng component để thực hiện phân trang.

import { Component } from '@angular/core';

import { PageEvent } from '@angular/material/paginator';

Hướng dẫn phân trang trong Angular

Phân trang với Angular Material 

Angular Material cung cấp các thành phần UI được dựng sẵn, bao gồm một thành phần phân trang, có thể dễ dàng tích hợp vào ứng dụng của bạn.

Để thực hiện phân trang bằng Angular Material, bạn có thể thực hiện theo quy trình như sau: 

  • Cài đặt Angular Material 

Trước khi thực hiện, hãy đảm bảo bạn đã cài đặt Angular Material cho dự án. Nếu chưa, bạn có thể cài đặt theo lệnh sau:

ng add @angular/material        
  • Nhập các module yêu cầu 

Trong file module của bạn (ví dụ như app.module.ts), hãy nhập cac module Angular Material cần thiết như:

import { MatPaginatorModule } from '@angular/material/paginator';
import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({
  imports:   
 [
    MatPaginatorModule,
    NgxPaginationModule,
    // ...
  ],
  // ...
})
export class AppModule { }
  • Tạo components phân trang

Tạo component mới sẽ chứa logic phân trang. Ví dụ như bạn có thể tạo một component có tên là PaginatorComponent:

ng generate component paginator
  • Triển khai logic phân trang

Trong thuộc tính PaginatorComponent, bạn hãy định nghĩa các thuộc tính và phương thức cần thiết để phân trang:

import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';

@Component({
  selector: 'app-paginator',
  template: `
    <mat-paginator
      [length]="totalItems"
      [pageSize]="pageSize"
      [pageSizeOptions]="pageSizeOptions"
      (page)="pageChanged.emit($event)">
    </mat-paginator>
  `,
  styleUrls: ['./paginator.component.css']
})
export class PaginatorComponent {
  @Input() totalItems = 0;
  @Input() pageSize = 10;
  @Input() pageSizeOptions: number[] = [5, 10, 25];
  @Output() pageChanged = new EventEmitter<PageEvent>();
}
  • Sử dụng Paginator component

Trong component mà bạn muốn hiển thị dữ liệu phân trang, hãy sử dụng PaginatorComponent. Thuộc tính có công dụng truyền tổng số mục và kích thước trang làm đầu vào, xử lý sự kiện pageChanged để lấy dữ liệu tương ứng: 

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <app-paginator
      [totalItems]="data.length"
      (pageChanged)="handlePageChange($event)">
    </app-paginator>
    <ul>
      <li *ngFor="let item of data | paginate: { itemsPerPage: pageSize, currentPage: p }">
        {{ item.name }}
      </li>
    </ul>
  `,
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  data = [/* Danh sách dữ liệu của bạn */];
  p: number = 1;
  pageSize = 10;

  handlePageChange(event: PageEvent) {
    this.pageSize = event.pageSize;
    // Cập nhật dữ liệu hiển thị dựa trên trang hiện tại
    // Ví dụ: gọi API để lấy dữ liệu mới
  }
}

Định dạng và tùy chỉnh Pagination Component

Bạn có thể định dạng các component phân trang một cách dễ dàng bằng Angular Material và thư viện ngx-pagination. Quy trình thực hiện cụ thể như:

  • Sử dụng Angular Material 

Angular Material cung cấp thuộc tính MatPaginator có cấu hình mạnh mẽ và dễ sử dụng để thực hiện phân trang. Sau khi đã cài đặt Angular Matetial, bạn tiếp tục tiến hành nhập module vào ứng dụng như:

import { Component } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  length = 100;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];

  handlePage(event: PageEvent) {
    this.pageSize = event.pageSize;
    // Cập nhật dữ liệu khi trang thay đổi
    console.log('Page event:', event);
  }
}
  • Thêm Paginator vào template

Trong template component, bạn sử dụng thuộc tính mat-paginator để hiển thị các điều khiển phân trang như:

<mat-paginator
  [length]="length"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  (page)="handlePage($event)">
</mat-paginator>

<div *ngFor="let item of data | slice: (page * pageSize): ((page * pageSize) + pageSize)">
  {{ item }}
</div>

Trong đó:

  • length: Tổng số mục dữ liệu.
  • pageSize: Số mục hiển thị trên mỗi trang.
  • pageSizeOptions: Các tùy chọn kích thước trang cho phép người dùng chọn.
  • handlePage: Hàm xử lý sự kiện khi người dùng thay đổi trang.
  • slice: Pipe được sử dụng để cắt dữ liệu thành các trang.

 

  • Tùy chỉnh giao diện

Để thực hiện tùy chỉnh giao diện của MatPaginator, bạn có thể sử dụng CSS như:

.mat-paginator {
  background-color: #f5f5f5;
  color: #333;
}

.mat-paginator .mat-paginator-navigation-first,
.mat-paginator .mat-paginator-navigation-previous,
.mat-paginator .mat-paginator-navigation-next,
.mat-paginator .mat-paginator-navigation-last {
  color: #007bff;
}

.mat-paginator .mat-paginator-page-size {
  margin: 0 8px;
}
  • Sử dụng thư viện ngx-pagination

Nếu bạn đã cài đặt thư viện ngx-pagination, bạn có thể tùy chỉnh giao diện của phân trang bằng cách nhập cac module vào ứng dụng:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  items = [
    // Danh sách dữ liệu mẫu
    { name: 'Item 1' },
    { name: 'Item 2' },
    // ...
  ];
  p: number = 1;
}

Trong template của component, sử dụng thêm Paginate pipe để hiển thị danh sách dữ liệu có phân trang:

<ul>
  <li *ngFor="let item of items | paginate: { itemsPerPage: 10, currentPage: p }">
    {{ item.name }}
  </li>
</ul>

<pagination-controls (pageChange)="p = $event"></pagination-controls>

Cuối cùng, bạn sử dụng thuộc tính CSS để thay đổi hoặc tùy chỉnh giao diện:

.pagination-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination-controls .ngx-pagination {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.pagination-controls .ngx-pagination:hover {
  background-color: #0056b3;
}

Một lời khuyên nhỏ:

Bạn có thể tùy chỉnh giao diện của các nút điều khiển bằng cách thêm các class CSS khác nhau. Đối với danh sách dữ liệu lớn, hãy cân nhắc sử dụng VirtualScroll hoặc các kỹ thuật tối ưu hóa hiệu suất khác. Ngx-pagination cung cấp nhiều tính năng bổ sung như hiển thị tổng số trang, nhảy đến trang cụ thể. Bạn có thể tham khảo tài liệu chính thức để tìm hiểu thêm.

Các câu hỏi thường gặp về phân trang Angular

Phân trang giúp cải thiện hiệu suất của Angular như thế nào?

Phân trang giúp cải thiện hiệu suất của các ứng dụng Angular bằng cách giới hạn lượng dữ liệu được tải và hiển thị cùng lúc, cụ thể như:

  • Giảm thiểu thời gian tải: Thay vì tải tất cả dữ liệu một lúc, phân trang cho phép ứng dụng chỉ tải một phần dữ liệu cho mỗi trang. Điều này giúp giảm thời gian tải ban đầu và giảm tải cho thiết bị của client.
  • Tiết kiệm Server Resources: Đối với các ứng dụng truy xuất dữ liệu từ server, phân trang giúp tối ưu hóa lượng dữ liệu được lấy về trong mỗi yêu cầu. Điều này giảm số lượng gọi API và giảm tải cho server, đặc biệt hiệu quả khi kết hợp với phân trang phía server.
  • Tăng trải nghiệm người dùng: Hiển thị dữ liệu trong các trang nhỏ giúp ứng dụng hoạt động nhanh và nhạy hơn, cho phép người dùng dễ dàng điều hướng qua các bộ dữ liệu mà không phải chờ đợi lâu.

Khi nào nên sử dụng thư viện phân trang Angular?

Sử dụng thư viện phân trang rất hữu ích khi:

  • Bạn muốn triển khai tính năng phân trang nhanh chóng mà không cần viết mã từ đầu.
  • Dự án yêu cầu một giao diện phân trang chuyên nghiệp và có khả năng tùy chỉnh.
  • Bạn muốn tiết kiệm thời gian và công sức, đặc biệt với các dự án có yêu cầu phân trang phức tạp hoặc khối lượng dữ liệu lớn.

Mỗi thư viện đều có ưu và nhược điểm riêng, việc lựa chọn thư viện phù hợp sẽ giúp quá trình phát triển ứng dụng Angular trở nên dễ dàng và hiệu quả hơn.

Tổng kết

Phân trang Angular là tính năng quan trọng giúp nâng cao hiệu suất và trải nghiệm người dùng, đặc biệt là khi làm việc với các dự án hoặc bộ dữ liệu lớn. Cùng với sự hỗ trợ của các thư viện ngx-pagination hay Angular Material sẽ giúp quy trình trở nên nhanh chóng và hiệu quả hơn.

Xem thêm: Angular là gì? Có phải là vũ khí hạng nặng của Front-End Developers?