Phân trang trong Vanilla JavaScript

Giới thiệu

Khi tạo một trang web hoặc ứng dụng web, đặc biệt nếu chúng có nhiều khuôn mẫu nội dung (chẳng hạn như lưới hoặc danh sách các mục thuộc một danh mục) – nói chung nên chia nó thành các trang để giảm số mục xuất hiện trên màn hình cùng một lúc.

Trong bài viết này, chúng ta sẽ tìm hiểu cách triển khai phân trang trong các dự án web của mình bằng cách sử dụng vanilla JavaScript từ đầu.

Với mục đích của bài viết này, chúng tôi sẽ lấy nội dung từ điều này phản hồi API ví dụ. Nó chứa 100 điểm dữ liệu, nhưng chúng tôi sẽ chỉ sử dụng 30 điểm và hiển thị 6 bài đăng trên màn hình của chúng tôi cùng một lúc.

Bắt đầu

Trước khi tìm nạp tất cả các bài đăng bắt buộc từ API bằng cách sử dụng API Tìm nạp tích hợp sẵn của trình duyệt, trước tiên chúng ta cần tạo một đánh dấu HTML cơ bản sẽ được điền động thông qua tập lệnh của chúng ta sau:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Đang tìm nạp các bài đăng API REST

Như đã đề cập trước đây, phân trang là chia nhỏ nội dung thành các phần nhỏ hơn. Nó yêu cầu bạn tìm nạp dữ liệu, quyết định thời điểm và cách chia nhỏ, tính toán số trang, sau đó hiển thị một phần dữ liệu cho người dùng. Rất may - chức năng back-end thường xử lý một số tác vụ đầu tiên và trả lại trang có liên quan, tổng số trang và nội dung trên một trang.

Trước tiên, hãy bắt đầu bằng cách tìm nạp tất cả các bài đăng của chúng tôi và sau đó chúng tôi sẽ sửa đổi điều này để chỉ truy vấn một vài điểm dữ liệu trên mỗi trang:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Hãy nhanh chóng kiểm tra đoạn mã trên. Trước hết, chúng tôi bắt đầu bằng cách lấy div phần tử nơi chúng tôi sẽ hiển thị tất cả nội dung của mình thông qua class tên chúng tôi đã gán cho div. Cuối cùng, chúng tôi đã viết một hàm để xử lý thao tác tìm nạp.

Trong tạp chí fetchPosts() chức năng, chúng tôi đã sử dụng Fetch API để lấy bài viết từ API bài đăng Trình giữ chỗ JSON, sau đó lưu trữ dữ liệu JSON được tham chiếu bởi posts biến và sử dụng innerHTML thuộc tính để thêm từng phần nội dung vào posts-section bằng cách lặp qua chúng.

Tại thời điểm này, chúng tôi đã tìm nạp thành công tất cả nội dung của mình.

Hãy bắt đầu bằng cách khai báo ba biến quan trọng để triển khai phân trang trong trang web của chúng ta. Cái đầu tiên là cái số lượng bài đăng chúng tôi muốn khai báo trên mỗi trang, sau đó số trang hiện tại (1 theo mặc định) và tổng số trang.

Đối với hướng dẫn này, chúng tôi sẽ cung cấp cho tổng số trang một số lượng cố định của 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

Trong phần trước, chúng tôi đã hiển thị tất cả các bài đăng trên một trang, nhưng chúng tôi chỉ muốn hiển thị sáu bài đăng cùng một lúc. Vì vậy, chúng tôi đã thiết lập numberPerPage đến 6 mà bây giờ chúng ta sẽ sử dụng để điều chỉnh thao tác tìm nạp để nó chỉ hiển thị 6 bài viết.

Nó phụ thuộc vào cách triển khai cụ thể, nhưng thông lệ phổ biến là cho phép sử dụng các tham số truy vấn khi tìm nạp kết quả từ API, cho phép bạn tìm nạp một số trang của các kết quả. Ví dụ: API REST giả mà chúng tôi đang sử dụng cho phép page và limit thông số cho phép bạn chỉ tải các lô mà bạn sẽ hiển thị tại một thời điểm nhất định.

Bằng cách này, chúng tôi chỉ tải dữ liệu mà chúng tôi muốn hiển thị cho người dùng! Sau đó, chúng tôi có thể tìm nạp trước trang tiếp theo để có thời gian tải nhanh hơn hoặc tận hưởng tốc độ tính toán đạt được bằng cách chỉ tải dữ liệu được hiển thị.

Chúng tôi sẽ sử dụng các tham số này bằng cách bổ sung yêu cầu tìm nạp của mình:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Trong đoạn mã trên, chúng tôi đã thêm hai tham số vào điểm cuối API là pageNumber và số lượng bài viết trên mỗi trang điều này sẽ giúp chúng tôi chia các bài đăng của mình thành nhiều trang và sau đó các bài đăng này hiện có thể được hiển thị dựa trên số trang.

Ngoài ra, chúng tôi cũng thông qua trong pageNumber đến fetchPosts() chức năng để chúng ta có thể gọi chức năng này bất cứ khi nào trang thay đổi:

Bây giờ, hãy thêm chức năng vào các nút điều hướng trang ở cuối trang của chúng ta và để chúng hiển thị nội dung phù hợp dựa trên số trang.

Chúng tôi sẽ nhận thấy rằng trong phần đánh dấu, chúng tôi có một phần hiển thị các nút phân trang:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

Bây giờ chúng tôi sẽ thêm click các sự kiện cho mỗi nút để khi chúng được nhấp vào, nội dung dành cho trang đó sẽ xuất hiện.

Thực hiện trước nút

Logic ở đây khá đơn giản. Tất cả những gì chúng ta phải làm là truy xuất phần tử đại diện cho nút trước, thêm click trình lắng nghe sự kiện cho nó và hiển thị nội dung phù hợp khi nhấp vào nút:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

Sau khi thêm một click trình xử lý sự kiện, chúng tôi đã kiểm tra xem số trang hiện tại có lớn hơn 1 trong chức năng gọi lại. Nếu số đó bằng hoặc nhỏ hơn 1, chúng tôi sẽ tiếp tục hiển thị nội dung hiện tại. Nhưng nếu số trang hiện tại lớn hơn 1 chúng ta có thể tự do giảm giá trị của nó và gọi fetchPosts(pageNumber) với số trang mới được truyền vào dưới dạng đối số, do đó hiển thị nội dung của trang trước đó.

Thực hiện Sau nút

Logic ở đây hoàn toàn giống như đối với trước nút, chỉ với một vài thay đổi nhỏ. Tất nhiên, chúng tôi sẽ truy xuất phần tử danh sách với lớp next thay vì prev. Ngoài ra, chúng tôi sẽ kiểm tra xem số trang hiện tại có nhỏ hơn số số trang mà chúng tôi đặt thành 30 thủ công trước đó. Cuối cùng, chúng ta sẽ tăng số trang hiện tại thay vì giảm nó:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

Kết luận

Việc chia nội dung thành các phần nhỏ hơn, dễ quản lý hơn được hiển thị riêng lẻ là rất quan trọng bất cứ khi nào bạn cố gắng hiển thị cơ sở dữ liệu hoặc bất kỳ nguồn dữ liệu nào khác trên ứng dụng web của mình.

Trong bài viết này, chúng ta đã xem xét cách triển khai phân trang bằng JavaScript từ đầu mà không cần bất kỳ thư viện và công cụ bên ngoài nào.

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://stackabuse.com/pagination-in-vanilla-javascript/