flask sqlalchemy 分页（二）

学习笔记 / 2024-10-11 / 原文

page.html

 
<!--这个是分页展示下面的页码-->
 
{%macro my_paginate(pagination,url)%}
 
<nav>
    <ul class="pagination">
 
        {%if pagination.has_prev%}
        <li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page-1)}}">上一页</a></li>
        {%else%}
        <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
        {%endif%}
 
            {%for page in pagination.iter_pages()%}
                {%if page%}
                    <li class="page-item {%if page==pagination.page%}active{%endif%}"><a class="page-link" href="{{url_for(url,page=page)}}">{{page}}</a></li>
                {%else%}
                    <li class="page-item disabled"><a class="page-link" href="#">…</a></li>
                {%endif%}
 
            {%endfor%}
 
        {%if pagination.has_next%}
        <li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page+1)}}">下一页</a></li>
        {%else%}
        <li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>
        {%endif%}
 
    </ul>
</nav>
{%endmacro%}

student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生</title>
	<link href="{{url_for('static',filename='/css/style.css')}}" rel="stylesheet">
</head>
<body>
    <div align="center">
        <h2>用户信息</h2>
        <br><br>
		
		
		<tbody>
		<table>
			<colgroup>
				<col width="30%">
				<col width="40%">
				<col width="30%">
			</colgroup>
			<thead>
				<tr>	
					<th>编号</th>
					<th>姓名</th>
					<th>成绩</th>
				</tr>
			</thead>	
			
			{% for stu in studentList %}
				<tr>
					<td>{{ stu['id'] }}</td>
					<td>{{ stu['name'] }}</td>
					<td>{{ stu['score'] }}</td>
				</tr>	
			{% endfor %}
		</table>
		</tbody>
    </div>
 
<!--     导入下面的页码-->
    {%import 'page.html' as pg%}
    {{pg.my_paginate(pagination,'query_stu')}}
<!--query_stu是对应的方法名称是什么，然后在点击页码时可以找到该方法，从而展示数据-->
 
</body>
</html>

style.css

/* 分页容器样式 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
	list-style: none;
}

/* 页码按钮样式 */
.pagination a {
    padding: 8px 12px;
    margin: 0 4px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 当前页码样式 */
.pagination a.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* 鼠标悬停在页码按钮上的样式 */
.pagination a:hover {
    background-color: #f5f5f5;
}

table {
    border-collapse: collapse;
    width: 60%;
    border: 1px solid #ddd;
    font-size: 14px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;

}

th {
    background-color: #000/*#4CAF50*/;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

database.py

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

models.py

from database import db
from config import app
class StudentMore(db.Model):
    __tablename__= 'Students'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(108), nullable=False)
    score = db.Column(db.Integer, nullable=False)
    
    def __repr__(self):
        return 'StudentMore  %r' % self.name
    
    
with app.app_context():
    db.create_all()

app.py

from flask import Flask,render_template
from flask import redirect
from flask import url_for
from database import db
from config import app
from models import StudentMore
 
@app.route('/stu/query/<int:page>', methods=['GET'])
def query_stu(page=None):
    if not page:
        page = 1
    students = StudentMore.query.paginate(page=page,per_page=5)
    # page是第几页，per_page是将每5个一页
 
    db.session.commit()
 
    # students.items是分页展示的数据
    return render_template("student.html", studentList=students.items,  pagination=students)
 
 
@app.route('/')
def index():
    return redirect(url_for("query_stu",page=1))
 
 
if __name__=="__main__":
    app.run(debug=True)