Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Pagination trong ReactJS
Trong bài tập này, mình sẽ mở rộng ứng dụng React của mình về việc gửi yêu cầu API để hiển thị danh sách người dùng. Mình sẽ thêm tính năng tìm kiếm để người dùng có thể tìm kiếm người dùng theo tên và tính năng phân trang để phân chia danh sách thành các trang dễ quản lý.
Tạo Component UserList
Tạo một component UserList để hiển thị danh sách người dùng. Trong file UserList.js, bạn sẽ thực hiện như sau:
// src/components/UserList.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const UserList = () => {
const [users, setUsers] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [usersPerPage] = useState(5); // Số lượng người dùng hiển thị trên mỗi trang
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
setUsers(response.data);
} catch (error) {
console.error('Error fetching users:', error);
}
};
fetchUsers();
}, []);
// Logic để hiển thị người dùng cho trang hiện tại
const indexOfLastUser = currentPage * usersPerPage;
const indexOfFirstUser = indexOfLastUser - usersPerPage;
const currentUsers = users.slice(indexOfFirstUser, indexOfLastUser);
return (
<div>
<h1>User List</h1>
<ul>
{currentUsers.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
};
export default UserList;
Tạo Component Pagination
Tạo một component Pagination để hiển thị các nút phân trang. Trong file Pagination.js, bạn sẽ thực hiện như sau:
// src/components/Pagination.js
import React from 'react';
const Pagination = ({ usersPerPage, totalUsers, paginate }) => {
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalUsers / usersPerPage); i++) {
pageNumbers.push(i);
}
return (
<nav>
<ul className="pagination">
{pageNumbers.map(number => (
<li key={number} className="page-item">
<a onClick={() => paginate(number)} href="#" className="page-link">
{number}
</a>
</li>
))}
</ul>
</nav>
);
};
export default Pagination;
Xử lý dữ liệu phân trang
Trong component UserList.js, mình đã thực hiện logic để chia danh sách người dùng thành các trang và hiển thị người dùng tương ứng với trang hiện tại.
Xử lý sự kiện chuyển trang
Trong component UserList.js, chúng ta sẽ thêm logic để xử lý sự kiện khi người dùng chuyển đến trang khác.
Cuối cùng, đảm bảo rằng bạn đã import các component và file CSS vào trong App.js để chúng được sử dụng trong ứng dụng của bạn.
Đây là cách thêm file CSS:
Tạo File CSS
Tạo một file CSS để trang trí cho các component. Ví dụ, tên file có thể là styles.css. Đây là một ví dụ về nội dung file CSS:
/* src/styles.css */
.pagination {
display: flex;
justify-content: center;
}
.pagination li {
list-style: none;
margin: 0 5px;
}
.pagination li a {
text-decoration: none;
color: blue;
}
.pagination li a:hover {
text-decoration: underline;
}
Nhớ import file CSS vào trong App.js:
// src/App.js
import React from 'react';
import UserList from './components/UserList';
import Pagination from './components/Pagination';
import './styles.css'; // Import file CSS
function App() {
return (
<div className="App">
<UserList />
<Pagination />
</div>
);
}
export default App;
Điều này sẽ áp dụng các quy tắc CSS trong file styles.css vào tất cả các component trong ứng dụng của bạn.
Tính năng tìm kiếm và phân trang là hai tính năng quan trọng để làm cho ứng dụng của mình trở nên mạnh mẽ và dễ sử dụng hơn. Khi kết hợp, chúng tạo ra một trải nghiệm người dùng tốt hơn và làm cho việc quản lý dữ liệu trở nên dễ dàng hơn. Đây là một bước quan trọng để làm quen với việc làm việc với dữ liệu từ API trong ứng dụng React của bạn.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Fetching Data from API trong ReactJS
- Displaying Details trong ReactJS
- Searching Data trong ReactJS
- Pagination trong ReactJS
- Loading Indicator trong ReactJS
- Error Handling trong ReactJS
- Form Submission trong ReactJS
- Authentication trong ReactJS
- Deleting Data trong ReactJS
- File Upload trong ReactJS
- Real-time Updates trong ReactJS
- External APIs Integration trong ReactJS
- Rate Limiting và Throttling trong ReactJS
