Các ứng dụng web quản lý một lượng lớn dữ liệu. Chẳng hạn, các ứng dụng thương mại điện tử hiển thị hàng tỷ dữ liệu theo cách vừa có tổ chức vừa hấp dẫn về mặt hình ảnh. Về cơ bản, dữ liệu cần được trình bày theo cách người dùng dễ hiểu và điều hướng.
Tuy nhiên, hiển thị tất cả dữ liệu trên một trang có thể dẫn đến các vấn đề về hiệu suất, thời gian tải chậm hơn và trải nghiệm người dùng kém. Vì lý do này, việc triển khai logic phân trang có thể giảm bớt đáng kể những vấn đề này.
Trong React, bạn có thể chọn sử dụng các thành phần dựng sẵn được cung cấp bởi các thư viện phân trang, ngoài ra, bạn có thể xây dựng một hệ thống phân trang tùy chỉnh bằng cách sử dụng móc React.
Có hai cách để triển khai phân trang trong các ứng dụng: phân trang phía máy khách và phía máy chủ. Tuy nhiên, bất kể định dạng bạn chọn là gì, khái niệm cơ bản vẫn giống nhau. Phân trang phía máy khách liên quan đến việc xử lý logic phân trang ở phía máy khách, bên trong trình duyệt của người dùng.
Bạn có thể triển khai phân trang phía máy khách bằng nhiều kỹ thuật khác nhau. Những kỹ thuật này bao gồm:
- Phân trang dựa trên trang: Phương pháp này liên quan đến việc chia dữ liệu thành các phần hoặc trang có kích thước cố định, thường hiển thị một số mục nhất định trên mỗi trang. Người dùng có thể điều hướng qua các trang bằng các nút hoặc liên kết điều hướng, được gắn nhãn bằng số trang hoặc các nút trước đó và tiếp theo. Đây là một triển khai phổ biến với các công cụ tìm kiếm và ứng dụng thương mại điện tử.
- cuộn vô hạn: Phương pháp này liên quan đến việc tải động và hiển thị dữ liệu mới khi người dùng cuộn xuống trang, tạo ra trải nghiệm duyệt liên tục và liền mạch. Kỹ thuật này đặc biệt hữu ích khi xử lý các bộ dữ liệu lớn liên tục mở rộng, chẳng hạn như nguồn cấp dữ liệu mạng xã hội.
Để bắt đầu, hãy tạo một dự án React. Bạn có thể sử dụng lệnh JavaScript tạo ứng dụng phản ứng để thiết lập ứng dụng React cơ bản cục bộ hoặc sử dụng Vite để dàn dựng một dự án React trên máy của bạn.
Hướng dẫn này đã sử dụng Vite, bạn có thể tìm thấy mã của dự án này trong phần này kho lưu trữ GitHub.
Sau khi thiết lập dự án React của bạn, hãy tiến hành triển khai phân trang dựa trên trang bằng cách sử dụng React Hook.
Định cấu hình Bộ dữ liệu
Lý tưởng nhất là bạn thường tìm nạp và hiển thị dữ liệu từ cơ sở dữ liệu. Tuy nhiên, đối với hướng dẫn này, bạn sẽ lấy dữ liệu từ một hình nộm JSONPlaceholder API thay vì.
bên trong src thư mục, tạo mới thành phần/phân trang tệp và thêm đoạn mã sau.
- Tạo một thành phần chức năng React và xác định các trạng thái sau.
import React, { useEffect, useState } from "react";
import "./style.component.css";function Pagination() {
const [data, setData] = useState([]);const [currentPage, setcurrentPage] = useState(1);
const [itemsPerPage, setitemsPerPage] = useState(5);const [pageNumberLimit, setpageNumberLimit] = useState(5);
const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
return (
<>
<h1> Pagination Component</h1> <br />
</>
);
}export default Pagination;
- Triển khai logic để tìm nạp dữ liệu từ API giả. Bên trong phân trang thành phần, thêm vào bên dưới.
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((response) => response.json())
.then((json) => setData(json));
}, []);const displayData = (data) => {
return (
<ul>
{data.length > 0 &&
data.map((todo, index) => {
return <li key={index}>{todo.title}</li>;
})}
</ul>
);
};Đoạn mã trên phục vụ hai mục đích chính. Đầu tiên, một khi thành phần được gắn kết, sử dụnghiệu ứng hook kích hoạt để tìm nạp dữ liệu từ điểm cuối API bên ngoài, sau đó được chuyển đổi sang định dạng JSON. Dữ liệu JSON kết quả sau đó được sử dụng để cập nhật dữ liệu biến trạng thái với dữ liệu việc cần làm đã tìm nạp. Thứ hai, các hiển thị dữ liệu sẽ lấy dữ liệu đã tìm nạp làm đối số và hiển thị dữ liệu dưới dạng danh sách việc cần làm không có thứ tự.
- Trong phân đoạn trở lại của phân trang thành phần, bao gồm các hiển thị dữ liệu chức năng hiển thị dữ liệu đã tìm nạp trong trình duyệt. Đây là phiên bản cập nhật của mã:
return (
<>
<h1> Pagination Component</h1> <br />
{displayData(data)}
</>
);Bằng cách gọi dữ liệu hiển thị (dữ liệu) trong phần tử JSX và chuyển dữ liệu biến trạng thái làm tham số, sau đó hàm sẽ hiển thị dữ liệu được tìm nạp dưới dạng danh sách không có thứ tự trong trình duyệt.
Trong trường hợp cụ thể này, danh sách được hiển thị bao gồm hai trăm việc cần làm. Tuy nhiên, trong các tình huống thực tế, các ứng dụng sẽ quản lý một lượng lớn dữ liệu. Hiển thị tất cả dữ liệu này trên một trang web có thể dẫn đến các vấn đề về hiệu suất, chẳng hạn như thời gian tải chậm và hiệu suất tổng thể của ứng dụng kém.
Để giải quyết vấn đề này, sẽ phù hợp khi kết hợp chức năng phân trang để đảm bảo mỗi trang chứa một số mục giới hạn mà người dùng có thể truy cập riêng bằng cách sử dụng các nút điều hướng.
Cách tiếp cận này cho phép người dùng điều hướng qua dữ liệu theo cách có tổ chức và dễ quản lý hơn, cải thiện hiệu suất tổng thể và trải nghiệm người dùng của ứng dụng.
Để xác định mục việc cần làm nào sẽ hiển thị trên mỗi trang, chúng ta cần triển khai logic cần thiết. Tuy nhiên, trước khi tiếp tục, điều cần thiết là xác định tổng số trang cần thiết dựa trên các mục công việc có sẵn.
Để đạt được điều này, bạn có thể thêm đoạn mã sau vào phân trang thành phần:
const pages = [];
for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
pages.push(i);
}
Đoạn mã trên, lặp qua dữ liệu mảng, tính toán tổng số trang cần thiết bằng cách chia độ dài của dữ liệu mảng theo số mục mong muốn trên mỗi trang—số mục ban đầu trên mỗi trang được đặt thành năm trong itemPerPage tình trạng.
Tuy nhiên, bạn có thể cập nhật số này theo yêu cầu để kiểm tra logic. Cuối cùng, mỗi số trang sau đó được thêm vào trang mảng. Bây giờ, hãy triển khai logic để hiển thị một số mục trên mỗi trang.
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const pageItems = data.slice(indexOfFirstItem, indexOfLastItem);
Mã này xác định việc cần làm để hiển thị trên trang trình duyệt dựa trên trang hiện tại Và itemPerPage biến—nó trích xuất các chỉ mục tương ứng cho tập hợp các việc cần làm từ mảng dữ liệu bằng phương pháp lát cắt. Sau đó, các chỉ mục được sử dụng để truy xuất các việc cần làm cụ thể thuộc về trang mong muốn.
Bây giờ, để hiển thị việc cần làm, hãy cập nhật hiển thị dữ liệu chức năng bằng cách thông qua trangMục như một tham số. Đây là phiên bản cập nhật của mã:
return (
<>
<h1> Pagination Component</h1> <br />
{displayData(pageItems)}
</>
);
Bằng cách thực hiện bản cập nhật này, hiển thị dữ liệu sẽ hiển thị một số lượng giới hạn các mục việc cần làm một cách thích hợp, phản ánh trang hiện tại.
Hợp lý hóa quyền truy cập và điều hướng trang bằng các nút điều hướng
Để đảm bảo người dùng dễ dàng điều hướng và truy cập nội dung trên các trang khác nhau, bạn cần thêm các nút trước đó và tiếp theo, cũng như các nút chỉ định số trang cụ thể.
Đầu tiên, hãy triển khai logic cho các nút số trang. bên trong phân trang thành phần, hãy thêm mã bên dưới.
const handleClick = (event) => {
setcurrentPage(Number(event.target.id));
}; const renderPageNumbers = pages.map((number) => {
if (number < maxPageNumberLimit +1 && number > minPageNumberLimit) {
return (
<li
key={number}
id={number}
onClick={handleClick}
className={currentPage == number ? "active" : null}
>
{number}
</li>
);
} else {
return null;
}
});
Các xử lýClick chức năng kích hoạt khi người dùng nhấp vào nút số trang. Hành động này sau đó cập nhật trang hiện tại biến trạng thái với số trang đã chọn.
Các kết xuất số trang biến sử dụng bản đồ phương pháp để lặp đi lặp lại trên trang mảng và tự động tạo các mục danh sách đại diện cho từng số trang. Nó áp dụng logic có điều kiện để xác định số trang nào sẽ hiển thị dựa trên giới hạn của số trang tối đa và tối thiểu đã xác định.
Cuối cùng, thêm mã cho các nút tiếp theo và trước đó.
const handleNextbtn = () => {
setcurrentPage(currentPage + 1);
if (currentPage + 1 > maxPageNumberLimit) {
setmaxPageNumberLimit(maxPageNumberLimit + pageNumberLimit);
setminPageNumberLimit(minPageNumberLimit + pageNumberLimit);
}
}; const handlePrevbtn = () => {
setcurrentPage(currentPage - 1);
if ((currentPage - 1) % pageNumberLimit == 0) {
setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
}
};
Để hiển thị các nút điều hướng, hãy cập nhật các phần tử JSX như sau:
return (
<>
<h1> Pagination Component</h1> <br />
{displayData(pageItems)}
<ul className="pageNumbers">
<li>
<button
onClick={handlePrevbtn}
disabled={currentPage == pages[0] ? true : false}
> Previous
</button>
</li>
{renderPageNumbers} <li>
<button
onClick={handleNextbtn}
disabled={currentPage == pages[pages.length - 1] ? true : false}
> Next
</button>
</li>
</ul>
</>
);
Khi thành phần hiển thị, nó sẽ hiển thị số trang, nút trước và nút tiếp theo cũng như các mục dữ liệu tương ứng cho trang hiện tại.
Lựa chọn giữa Thư viện phân trang và Hệ thống phân trang tùy chỉnh
Khi phải quyết định giữa việc sử dụng các thư viện phân trang hay xây dựng một hệ thống phân trang tùy chỉnh, sự lựa chọn phụ thuộc vào nhiều yếu tố khác nhau. Các thư viện phân trang, chẳng hạn như phản ứng phân trang, cung cấp các thành phần và chức năng dựng sẵn, cho phép triển khai nhanh chóng và đơn giản.
Mặt khác, việc xây dựng một hệ thống phân trang tùy chỉnh bằng cách sử dụng móc React mang lại sự linh hoạt và khả năng kiểm soát tốt hơn đối với logic phân trang và giao diện người dùng. Quyết định cuối cùng sẽ phụ thuộc vào nhu cầu và sở thích cụ thể của bạn.