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)
标签：__,pagination,sqlalchemy,分页,flask,db,color,import,page From： https://www.cnblogs.com/luoye00/p/18456589