如何在 Flask 应用程序中对 HTML 表格进行排序？答案

【问题标题】：How to sort an HTML table within a Flask app?如何在 Flask 应用程序中对 HTML 表格进行排序？
【发布时间】：2020-04-30 08:50:37
【问题描述】：

我目前有一个 Flask 应用程序，它从 SQL 服务器读取数据并通过 HTML 表显示它们。我希望能够通过单击相应的列对表格进行排序。如果这不可能，那么如何使用 Time 列提前对数据进行排序，然后只显示排序后的表？

这是应用程序：

from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import Table, Column, Integer
from flask import Flask, render_template

app = Flask(__name__)
db = SQLAlchemy(app)

class Orders(db.Model):
    __tablename__ = 'orders'
    OrderID = db.Column(db.Integer(), primary_key=True)
    TableNo = db.Column(db.Integer())
    Item = db.Column(db.String())
    Quantity = db.Column(db.String())
    Number = db.Column(db.String())
    Time = db.Column(db.String())

    def __repr__(self):
        return 'Order: ' + self.OrderID

@app.route("/Orders")
def html():
    orders = Orders.query.all()
    return render_template('Page.html', orders = orders)

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

这是从 SQL 数据库中读取数据的 html 代码。

<!DOCTYPE html>

<link href="static/style.css?versop" rel="stylesheet" type="text/css"</link>

<h1> AI Waiter <h1>
    <h2> Orders </h2>

    <table>
        <tr>
            <th>OrderID</th>
            <th>TableNo</th>
            <th>Number</th>
            <th>Quantity</th>
            <th>Item</th>
            <th>Time</th>
            <th>Served</th>
        </tr>

    {% for orders in orders %}
    <tr>
        <td>
            {{orders.OrderID}}
        </td>
        <td>
            {{orders.TableNo}}
        </td>
        <td>{{orders.Item}}</td>
        <td>{{orders.Quantity}}</td>
        <td>
            {{orders.Number}}
        </td>
        <td>{{orders.Time}}</td>
        <td>
            <input type="checkbox"><br>
        </td>
    </tr>
    {% endfor %}

    </table>

【问题讨论】：

如果你想让 HTML 做某事，你还必须共享 HTML...另外，最好的解决方案可能不是在后端使用 flask/，而是这样做在前端使用 JS，如果您想响应式进行。
为什么不使用 SQL 本身对查询进行排序？
@DebdutGoswami “我希望能够通过单击相应的列对表格进行排序。” OP，您应该为此查看JS。

标签： python html flask flask-sqlalchemy

【解决方案1】：

我的方法将是以下步骤：

将查询结果的主键作为列表发送到主查询旁边的 Jinja 模板，即“订单”。
将列表传递给控制排序的 JS 函数。
使用异步请求通过单独的路由将列表发送回 Flask。
在 Flask 路由功能上，使用 SQLAlchemy 根据主键列表重建查询。
对查询进行排序。
Jsonify 查询并将其发送回 JS。
在 JS 上，将原始表格 HTML 替换为新的排序数据。

潜在的问题是，如果你的表非常大，比如超过 1000 行，重建查询可能会触发“SQL 变量太多”的错误，我目前没有很好的解决方案。

【讨论】：