Javascript 烧瓶：如何使用分页过滤和显示不同的积垢表？
在我的Flask应用程序中，我有10多个积垢表，我希望使用Select下拉列表一次显示一个积垢表。我已经找到并遵循了很多教程，这些教程帮助我实现了一个单一的CRUD表，但对于多个表，我还没有找到解决方案 在我当前的解决方案中，我只设法使筛选和显示表正常工作，但我面临其他功能的问题，如Javascript 烧瓶：如何使用分页过滤和显示不同的积垢表？,javascript,python,html,flask,crud,Javascript,Python,Html,Flask,Crud,在我的Flask应用程序中，我有10多个积垢表，我希望使用Select下拉列表一次显示一个积垢表。我已经找到并遵循了很多教程，这些教程帮助我实现了一个单一的CRUD表，但对于多个表，我还没有找到解决方案 在我当前的解决方案中，我只设法使筛选和显示表正常工作，但我面临其他功能的问题，如 无法对默认值以外的任何表进行分页 设置要显示的默认表 编辑/删除特定表格 编辑/删除后重新路由回同一个表 此时，我必须在代码中硬编码表名，但我希望这一切都是动态的。我怎样才能使它动态地工作 app.py fr
- 无法对默认值以外的任何表进行分页
- 设置要显示的默认表
- 编辑/删除特定表格
- 编辑/删除后重新路由回同一个表
from flask import Flask, render_template, request, redirect, url_for, flash
from flask_sqlalchemy import SQLAlchemy
from forms import Dropdown_Form
app = Flask(__name__)
app.secret_key = "Secret Key"
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///site.db"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
db = SQLAlchemy(app)
class Table_A(db.Model):
id = db.Column(db.Integer, primary_key=True)
code = db.Column(db.Integer)
name = db.Column(db.String(300))
def __init__(self, code, name):
self.code = code
self.name = name
class Table_B(db.Model):
id = db.Column(db.Integer, primary_key=True)
code = db.Column(db.Integer)
name = db.Column(db.String(300))
def __init__(self, code, name):
self.code = code
self.name = name
@app.route("/", methods=["GET", "POST"])
def index():
form = Dropdown_Form()
page = request.args.get("page", 1, type=int)
table = Table_A.query.paginate(page=page, per_page=5)
if request.method == "POST":
table = globals()[request.form.get("table_name")]
page = request.args.get("page", 1, type=int)
table = table.query.paginate(page=page, per_page=5)
return render_template("index.html", form=form, table=table)
return render_template("index.html", form=form, table=table)
@app.route("/insert", methods=["GET", "POST"])
def insert():
if request.method == "POST":
code = request.form.get("code")
name = request.form.get("name")
my_data = Table_B(code, name)
db.session.add(my_data)
db.session.commit()
flash("Data inserted successfully.")
return redirect(url_for("index"))
@app.route("/update", methods=["GET", "POST"])
def update():
if request.method == "POST":
my_data = Table_B.query.get(request.form.get("id"))
my_data.code = request.form.get("code")
my_data.name = request.form.get("name")
db.session.commit()
flash("Data updated successfully.")
return redirect(url_for("index"))
@app.route("/delete/<id>/", methods=["GET", "POST"])
def delete(id):
my_data = Table_B.query.get(id)
db.session.delete(my_data)
db.session.commit()
flash("Data deleted successfully.")
return redirect(url_for("index"))
if __name__ == "__main__":
db.create_all()
app.run(port=5000, debug=True)
from flask_wtf import FlaskForm
from wtforms import StringField, SelectField, SubmitField #, PasswordField, SubmitField, BooleanField
class Dropdown_Form(FlaskForm):
table_name = SelectField("Table Name", choices=[("Table_A","Table A"), ("Table_B", "Table B")])
submit = SubmitField("Submit")
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<meta charset="UTF-8">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
{% block body %}
{% endblock %}
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
{% extends 'base.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row mt-4 mb-4">
<div class="col md-12">
<div class="content-section">
<legend class="border-bottom mb-4">Manage Tables</legend>
<form method="POST" action="">
{{ form.hidden_tag() }}
<div class="row">
<div class="col-3">
{{ form.table_name(class="form-control form-select form-control-sm") }}
</div>
<div class="col-3">
{{ form.submit(class="btn btn-primary btn-sm btn-block") }}
</div>
</div>
</form>
<hr>
<div class="row">
<div class="col mt-2 mb-4">
<button type="button" class="btn btn-sm btn-primary float-left" data-toggle="modal" data-target="#mymodal">Add Data</button>
</div>
</div>
<table class="table table-sm table-hover">
<thead class="table-light">
<tr>
<th>Id</th>
<th>Code</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
{% for row in table.items %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.code }}</td>
<td>{{ row.name }}</td>
<td>
<a href="/update/{{row.id}}" class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#modaledit{{row.id}}">Edit</a>
<a href="/delete/{{row.id}}" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are You Sure To Delete?')">Delete</a>
</td>
</tr>
<!-- Modal Edit Employee-->
<div id="modaledit{{row.id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update Information</h4>
</div>
<div class="modal-body">
<form action="{{url_for('update')}}" method="POST">
<div class="form-group">
<label>Code:</label>
<input type="hidden" name="id" value="{{row.id}}" />
<input type="text" class="form-control" name="code" value="{{row.code}}" />
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" value="{{row.name}}"/>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">
Update
</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
</table>
{% for page in table.iter_pages() %}
{% if page %}
{% if table.page == page %}
<a class="btn btn-primary mb-4" href="{{ url_for('index', table_name='Table_A', page=page) }}">{{ page }}</a>
{% else %}
<a class="btn btn-outline-primary mb-4" href="{{ url_for('index', table_name='Table_A', page=page) }}">{{ page }}</a>
{% endif %}
{% endif %}
{% endfor %}
</div>
<!-- Modal Add Employee-->
<div id="mymodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Data</h4>
</div>
<div class="modal-body">
<form method="POST" action="{{url_for('insert')}}">
<div class="form-group">
<label>Code:</label>
<input type="text" class="form-control" name="code" required="1"/>
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" required="1"/>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Add Data
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{%block title%}{%endblock%}
{%block body%}
{%endblock%}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<meta charset="UTF-8">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
{% block body %}
{% endblock %}
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
{% extends 'base.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row mt-4 mb-4">
<div class="col md-12">
<div class="content-section">
<legend class="border-bottom mb-4">Manage Tables</legend>
<form method="POST" action="">
{{ form.hidden_tag() }}
<div class="row">
<div class="col-3">
{{ form.table_name(class="form-control form-select form-control-sm") }}
</div>
<div class="col-3">
{{ form.submit(class="btn btn-primary btn-sm btn-block") }}
</div>
</div>
</form>
<hr>
<div class="row">
<div class="col mt-2 mb-4">
<button type="button" class="btn btn-sm btn-primary float-left" data-toggle="modal" data-target="#mymodal">Add Data</button>
</div>
</div>
<table class="table table-sm table-hover">
<thead class="table-light">
<tr>
<th>Id</th>
<th>Code</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
{% for row in table.items %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.code }}</td>
<td>{{ row.name }}</td>
<td>
<a href="/update/{{row.id}}" class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#modaledit{{row.id}}">Edit</a>
<a href="/delete/{{row.id}}" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are You Sure To Delete?')">Delete</a>
</td>
</tr>
<!-- Modal Edit Employee-->
<div id="modaledit{{row.id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update Information</h4>
</div>
<div class="modal-body">
<form action="{{url_for('update')}}" method="POST">
<div class="form-group">
<label>Code:</label>
<input type="hidden" name="id" value="{{row.id}}" />
<input type="text" class="form-control" name="code" value="{{row.code}}" />
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" value="{{row.name}}"/>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">
Update
</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
</table>
{% for page in table.iter_pages() %}
{% if page %}
{% if table.page == page %}
<a class="btn btn-primary mb-4" href="{{ url_for('index', table_name='Table_A', page=page) }}">{{ page }}</a>
{% else %}
<a class="btn btn-outline-primary mb-4" href="{{ url_for('index', table_name='Table_A', page=page) }}">{{ page }}</a>
{% endif %}
{% endif %}
{% endfor %}
</div>
<!-- Modal Add Employee-->
<div id="mymodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Data</h4>
</div>
<div class="modal-body">
<form method="POST" action="{{url_for('insert')}}">
<div class="form-group">
<label>Code:</label>
<input type="text" class="form-control" name="code" required="1"/>
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" required="1"/>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">
Add Data
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{%extends'base.html%}
{%block title%}主页{%endblock%}
{%block body%}
管理表
{{form.hidden_tag（）}}
{{form.table_name（class=“form control form select form control sm”）}
{form.submit（class=“btn btn主btn sm btn块”）}
添加数据
身份证件
代码
名称
行动
{table.items%中的行的%s}
{{row.id}}
{{row.code}}
{{row.name}
更新信息
代码：
姓名：
更新
接近
{%endfor%}
{table.iter_pages（）%%中的页的%
{%if page%}
{%if table.page==page%}
{%else%}
{%endif%}
{%endif%}
{%endfor%}
添加数据
代码：
姓名：
添加数据
接近
{%endblock%}