【多维剖析】JavaWeb网页分页与数据展示的结合运用

2023-11-28 22:01:19

在 Java Web 应用中使用 AJAX、JSTL 和 EL 实现数据分页

简介

在 Web 开发中，我们经常需要在页面上显示大量数据。将所有数据一次性全部显示在页面上可能会使页面变得臃肿，影响用户体验。因此，分页展示数据至关重要，即一次只显示部分数据，并提供页面导航功能，以便用户轻松浏览其他页面。

实现数据分页的方法有很多，其中最常用的是 AJAX （异步 JavaScript 和 XML）技术。AJAX 允许我们向服务器发送请求并获取数据，而无需刷新整个页面。这使我们能够只加载当前页面所需的数据，从而提高页面加载速度和用户体验。

本文将详细介绍如何结合 AJAX、JSTL 和 EL 表达式 在 Java Web 应用中实现分页数据展示。我们还将提供一个示例项目，帮助你快速上手实践。

技术栈

MySQL 数据库
Spring Boot 框架
Thymeleaf 模板引擎

步骤

1. 构建数据库表

首先，创建一个名为 user 的 MySQL 表，包含以下字段：

id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
age INT NOT NULL,
PRIMARY KEY (id)

2. 编写实体类

创建一个实体类 User 来映射数据库表：

public class User {

    private Integer id;
    private String name;
    private Integer age;

    //省略 getter 和 setter 方法
}

3. 编写数据访问层接口

创建数据访问层接口 UserRepository 来操作数据库：

public interface UserRepository extends JpaRepository<User, Integer> {

}

4. 编写 Service 层接口

创建 Service 层接口 UserService 来封装业务逻辑：

public interface UserService {

    Page<User> findAll(Pageable pageable);
}

5. 编写 Service 层实现类

创建 Service 层实现类 UserServiceImpl 来实现业务逻辑：

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserRepository userRepository;

    @Override
    public Page<User> findAll(Pageable pageable) {
        return userRepository.findAll(pageable);
    }
}

6. 编写 Controller

创建 Controller UserController 来处理用户请求：

@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/users")
    public String users(Model model, Pageable pageable) {
        Page<User> users = userService.findAll(pageable);
        model.addAttribute("users", users);
        return "users";
    }
}

7. 编写 Thymeleaf 模板

创建 Thymeleaf 模板 users.html 来展示数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="user : ${users}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.name}"></td>
                <td th:text="${user.age}"></td>
            </tr>
        </tbody>
    </table>

    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item" th:if="${users.hasPrevious()}">
                <a class="page-link" th:href="@{/users(page=${users.number - 1})}">Previous</a>
            </li>
            <li class="page-item" th:each="i : ${#numbers.sequence(0, users.totalPages - 1)}">
                <a class="page-link" th:href="@{/users(page=${i})}" th:text="${i + 1}"></a>
            </li>
            <li class="page-item" th:if="${users.hasNext()}">
                <a class="page-link" th:href="@{/users(page=${users.number + 1})}">Next</a>
            </li>
        </ul>
    </nav>
</body>
</html>