利用HTML和Java实现简单的下一页功能

在Web应用程序中，翻页功能是非常常见的需求，尤其是在处理大量数据时。本文将展示如何使用HTML前端技术配合Java后端逻辑来实现基本的翻页功能。

前端HTML设计

首先，我们需要创建一个简单的HTML页面，用于显示数据列表和翻页控件。

< !DOCTYPE html >
    < html lang = "zh" >
    < head >
    < meta charset = "UTF-8" >
    < title > 翻页示例 < /title> < /head> < body >
    < table border = "1" >
    < thead >
    < tr >
    < th > ID < /th> < th > 名称 < /th> < /tr> < /thead> < tbody id = "data-list" >
    < /tbody> < /table> < div id = "pagination" >
    < button onclick = "navigatePage(1)" > 首页 < /button> < button onclick = "navigatePage(-1)" > 上一页 < /button> < span id = "currentPage" > 1 < /span> < button onclick = "navigatePage(1)" > 下一页 < /button> < button onclick = "navigatePage(-1, true)" > 末页 < /button> < /div>
< script >
    function navigatePage(direction, toLast = false) {
        const currentPageElement = document.getElementById('currentPage');
        let currentPage = parseInt(currentPageElement.textContent);
        if (toLast) {
            // 跳转到最后一页
            currentPage = Math.ceil(totalPages / itemsPerPage);
        } else {
            currentPage += direction;
        }
        currentPage = Math.max(1, currentPage); // 确保不小于1
        currentPageElement.textContent = currentPage;
        fetch(`/getData?page=${currentPage}`)
            .then(response => response.json())
            .then(data => {
                const tbody = document.getElementById('data-list');
                tbody.innerHTML = ''; // 清空表格
                data.forEach(item => {
                    const row = document.createElement('tr');
                    row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
                    tbody.appendChild(row);
                });
            });
    } < /script> < /body> < /html>

后端Java逻辑

接下来，我们来看一下后端Java部分的实现。这里假设你正在使用Spring Boot框架来构建你的后端服务。

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
public class DataController {

    private List<Item> items = new ArrayList<>();
    
    public DataController() {
        // 初始化数据
        for (int i = 1; i <= 100; i++) {
            items.add(new Item(i, "Item " + i));
        }
    }

    @GetMapping("/getData")
    public List<Item> getData(@RequestParam int page) {
        int pageSize = 10; // 每页显示的数据量
        int start = (page - 1) * pageSize;
        int end = Math.min(start + pageSize, items.size());
        return items.subList(start, end);
    }

    static class Item {
        private int id;
        private String name;

        public Item(int id, String name) {
            this.id = id;
            this.name = name;
        }

        public int getId() {
            return id;
        }

        public String getName() {
            return name;
        }
    }
}

我们创建了一个DataController类来处理HTTP GET请求。这个控制器接收一个名为page的参数，用来确定当前页数。然后根据这个页数从数据库或数据集中获取对应的数据片段，并返回给前端。