基于CSS Flexbox实现图书列表分页的技术求助

你已经基于Flask+SQLAlchemy搭建了图书列表页面，采用Flexbox布局和单选按钮标签页，现在需要给50-500条图书记录添加分页功能，以下是完整的实现方案：

一、修改后端逻辑（app.py） #

接收分页参数，实现分页查询并计算总页数：

from flask import Flask, render_template, request
from sqlalchemy import create_engine
from sqlalchemy.sql import text
from sqlalchemy.orm import scoped_session, sessionmaker

engine = create_engine("postgresql://postgres:admin@localhost:5432/catalog_db")
db = scoped_session(sessionmaker(bind=engine))

app = Flask(__name__)

app.secret_key = '12345678'
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"

@app.route('/bookList')
def booklist():
    # 获取当前页码，默认第1页
    page = request.args.get('page', 1, type=int)
    # 每页显示10条数据，可根据需求调整
    per_page = 10
    
    # 查询当前页的图书数据
    offset = (page - 1) * per_page
    book_statement = text("""SELECT title,author FROM book order by id LIMIT :limit OFFSET :offset""")
    books = db.execute(book_statement, {"limit": per_page, "offset": offset}).fetchall()
    
    # 查询总记录数，计算总页数
    count_statement = text("""SELECT COUNT(*) FROM book""")
    total_count = db.execute(count_statement).scalar()
    total_pages = (total_count + per_page - 1) // per_page  # 向上取整

    return render_template("BookList0.html", books=books, page=page, total_pages=total_pages)

if __name__ == '__main__':
    app.run(debug=True)

二、更新前端模板（BookList0.html） #

在表格容器下方添加分页导航栏，处理页码跳转逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/styleTest.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Result</title>
</head>
<body>
  <div class="mytabs">
          <!-------------------------------- First Tab begins-------------------------&gt;
          <input type="radio" id="tg2d" name="mytabs" checked="checked">
          <label for="tg2d">Book Data</label>
          <div class="tab">
            <div class="table-container-1">
                <p></p>
                <div class="table-row heading">
                    <div class="row-item-h1">Book Related Details</div>
                </div>
                {% for book in books %}
                    {% if loop.first %}
                        <div class="table-row heading">
                            <div class="row-item-h2">Title</div>
                            <div class="row-item-h2">Author</div>
                        </div>
                    {% endif %}
                    <div class="table-row">
                        <div class="row-item-b">{{book.title}}</div>
                        <div class="row-item-b">{{book.author}}</div>
                    </div>
                {% else %}
                    <div class="table-row">
                        <div class="row-item-b1">No matching records found.</div>
                    </div>
                {% endfor %}
            </div>
            
            <!-- 分页导航 -->
            <div class="pagination-container">
                {% if page > 1 %}
                    <a href="{{ url_for('booklist', page=page-1) }}" class="pagination-btn">上一页</a>
                {% endif %}
                
                {% for p in range(1, total_pages+1) %}
                    <a href="{{ url_for('booklist', page=p) }}" class="pagination-btn {% if p == page %}active{% endif %}">{{ p }}</a>
                {% endfor %}
                
                {% if page < total_pages %}
                    <a href="{{ url_for('booklist', page=page+1) }}" class="pagination-btn">下一页</a>
                {% endif %}
            </div>
          </div>
  </div>
</body>
</html>

三、添加分页样式（styleTest.css） #

在CSS文件末尾添加分页相关样式，保持和现有风格统一：

/* 分页样式 */
.pagination-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 8px;
}

.pagination-btn {
    padding: 8px 12px;
    background-color: #e2e2e2;
    color: #000080;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

.pagination-btn:hover {
    background-color: #ccc;
}

.pagination-btn.active {
    background-color: #000080;
    color: white;
}

关键说明： #

• 后端通过request.args.get获取页码参数，默认第1页
• 使用LIMIT和OFFSET实现数据库层面的分页，避免一次性加载所有数据
• 总页数通过总记录数除以每页数量向上取整计算
• 前端分页导航判断边界情况，避免无效的上一页/下一页链接
• 激活的页码会高亮显示，提升用户体验

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