flask sqlalchemy 分页(二)
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)