页面导航后分页按钮失效问题求助

API 探路者

2026-6-26

问题描述

使用Express框架的Node.js路由渲染EJS格式的图书库存分页页面，首次访问/Pages/Inventory/1时，分页按钮可正常点击并跳转至第2页；但进入第2页后，Forward和Backward分页按钮无hover效果且无法点击，无法继续导航至第3页或返回第1页。

提供的代码

路由代码

app.get('/Pages/Inventory/:pageNumber', async (req, res) => {
    const pageNumber = parseInt(req.params.pageNumber);
    const pageSize = 20; 

    try {
        const books = await BookInventory.getInventory(pageNumber, pageSize);
        res.render('BookInventory', { books, pageNumber });
    } catch (error) {
        console.error('Error retrieving inventory:', error);
        res.status(500).send('An error occurred.');
    }
});

EJS页面代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Book Inventory</title>
        <link rel="stylesheet" href="../../Styles/BookInventory.css">
        <link rel="stylesheet" href="../../Styles/css/all.css">
        <link rel="icon" href="../../Images/Seal.ico">
        <script src="../../Scripts/BookInventory.js"></script>
    </head>
    <body>
        <div class="Wrapper">
            <div class="Side-Bar">
                <div class="Side-Bar-Wrapper">
                    <div class="Side-Bar-Label">
                        <p>Book Inventory</p>
                    </div>
                    <div class="Side-Bar-Logo">
                        <img src="../../Images/SchoolLogo.png" width="180px" height="180px">
                    </div>
                    <div class="Side-Bar-Nav">
                        <div class="Side-Bar-Navigator" id="Organizations">
                            <div class="Side-Bar-Navigator-Icon">
                                <i class="fa-solid fa-sitemap"></i>
                            </div>
                            <p>User Organization</p>
                        </div>
                        <div class="Side-Bar-Navigator" id="Inventory">
                            <div class="Side-Bar-Navigator-Icon">
                                <i class="fa-solid fa-book"></i>
                            </div>
                            <p>Book Inventory</p>
                        </div>
                        <div class="Side-Bar-Navigator" id="Archives">
                            <div class="Side-Bar-Navigator-Icon">
                                <i class="fa-solid fa-box-archive"></i>
                            </div>
                            <p>Archives</p>
                        </div>
                        <div class="Side-Bar-Navigator" id="Home">
                            <div class="Side-Bar-Navigator-Icon">
                                <i class="fa-solid fa-house"></i>
                            </div>
                            <p>Home</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Maincontent">
                <div class="Maincontent-Wrapper">
                    <div class="Top-Controls">
                        <div class="Search-Bar">
                            <input id="InventorySearch" class="Search-Input" type="text" placeholder="Search Inventory">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </div>
                        <button class="AddBTN" id="Add-User">Add Book</button>
                    </div>
                    <!--For Each Book-->
                    <% books.forEach(book => { %>
                        <div class="Book-Entry" id="<%= book.BookID %>">
                            <div class="Cover">
                                <img src="../<%= book.BookCover %>" class="Entry-Cover">
                            </div>
                            <div class="Info-Block">
                                <span class="Title-Span">
                                    <h1 class="Book-Title"><%= book.BookTitle %></h1>
                                    <button class="Editing-Btn" id="Edit-Title"><i class="fa-solid fa-pen"></i></button>
                                </span>
                                <h2 class="Book-ID"># <%= book.BookID %></h2>
                                <div class="Author-Container">
                                    <h3>Author :</h3>
                                    <p class="Author">
                                        <span class="Book-Author"><%= book.BookAuthor %></span>
                                    </p>
                                    <button class="Editing-Btn" id="Edit-Author">
                                        <i class="fa-solid fa-pen"></i>
                                    </button>
                                </div>
                                <div class="Buttons">
                                    <button class="ArchiveBtn" id="Archive-Book">Archive<i class="fa-solid fa-box-archive"></i></button>
                                </div>
                            </div>
                        </div>
                    <% }); %>
                    <div class="Pagination">
                        <div class="Pagination-Controls" data-pageNumber="1">
                            <button id="Backward">
                                <i class="fa-solid fa-backward"></i>
                            </button>
                            <button id="Forward">
                                <i class="fa-solid fa-forward"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

前端JS代码

document.getElementById('Forward').addEventListener('click', () => {
        const currentPageNumber = getCurrentPageNumber();
        const nextPageNumber = currentPageNumber + 1;
        window.location.href = `/Pages/Inventory/${nextPageNumber}`;
    });
    
    document.getElementById('Backward').addEventListener('click', () => {
        const currentPageNumber = getCurrentPageNumber();
        if (currentPageNumber > 1) {
            const prevPageNumber = currentPageNumber - 1;
            window.location.href = `/Pages/Inventory/${prevPageNumber}`;
        }
    });
    
    function getCurrentPageNumber() {
        const currentPagePath = window.location.pathname;
        const pageNumber = currentPagePath.split('/').pop();
        return parseInt(pageNumber);
    }

问题原因分析

静态资源相对路径解析错误：EJS页面中使用../../这类相对路径引用CSS、JS和图片资源，当访问/Pages/Inventory/2时，浏览器会将相对路径解析为/Pages/../../Styles/BookInventory.css，实际指向的路径与服务器上的静态资源位置不匹配，导致CSS和JS文件加载失败。
样式与交互失效：CSS加载失败导致按钮的hover样式无法显示；JS文件加载失败则无法为分页按钮绑定点击事件，所以按钮无法点击。

解决方案

1. 改用根路径引用静态资源

将所有静态资源的相对路径改为以/开头的根路径，确保无论当前页面处于哪个层级，都能正确指向服务器上的静态资源：

<!-- 修改head中的资源引用 -->
<link rel="stylesheet" href="/Styles/BookInventory.css">
<link rel="stylesheet" href="/Styles/css/all.css">
<link rel="icon" href="/Images/Seal.ico">
<script src="/Scripts/BookInventory.js"></script>

<!-- 修改侧边栏图片路径 -->
<img src="/Images/SchoolLogo.png" width="180px" height="180px">

<!-- 修改书籍封面路径 -->
<img src="/<%= book.BookCover %>" class="Entry-Cover">

注意：需根据你的项目实际目录结构调整根路径，确保路径指向静态资源的真实位置。

2. 确认Express静态资源中间件配置正确

在Node.js主文件中，确保已正确配置静态资源目录，让Express能正确响应静态资源请求：

const express = require('express');
const app = express();

// 假设静态资源存放在项目根目录的public文件夹下
app.use(express.static('public'));

// 其他路由和配置代码...

若你的静态资源目录不是public，请替换为实际目录名称。

3. 优化页码获取方式（可选）

将EJS中分页控件的硬编码data-pageNumber="1"改为动态传入的pageNumber，再通过该属性获取当前页码，比解析URL更可靠：

<!-- 修改分页控件的data属性 -->
<div class="Pagination-Controls" data-pageNumber="<%= pageNumber %>">
    <button id="Backward">
        <i class="fa-solid fa-backward"></i>
    </button>
    <button id="Forward">
        <i class="fa-solid fa-forward"></i>
    </button>
</div>

// 修改getCurrentPageNumber函数
function getCurrentPageNumber() {
    const paginationControls = document.querySelector('.Pagination-Controls');
    return parseInt(paginationControls.dataset.pagenumber);
}

内容的提问来源于stack exchange，提问作者Frostishyper03

页面导航后分页按钮失效问题求助

提供的代码 #

路由代码 #

EJS页面代码 #

前端JS代码 #

1. 改用根路径引用静态资源 #

2. 确认Express静态资源中间件配置正确 #

3. 优化页码获取方式（可选） #