javascript - 使用 JavaScript 对 HTML 中的 Python/Flask 动态呈现的表格进行排序
问题描述
这是我第一次构建 Web 应用程序,我想从头开始学习基础知识。所以我有一个 Python 脚本,我想在终端上使用打印的数据表进行练习,并决定使用 Flask、HTML、CSS、JS 在网页上显示该表。到目前为止,我已经开始工作了。
现在,我想通过单击表格标题对该表格进行排序。
这是我的代码的总体细分以及到目前为止我所做的工作:
Python 脚本
from flask import Flask, render_template, request, url_for
app = Flask(__name__)
def get_table():
...
return dict //returns list of dictionaries, for example...
//dict = [{'name':'Joe','age':'25'},
// {'name':'Mike','age':'20'},
// {'name':'Chris','age':'29'}]
@app.route("/")
def home():
return render_template('home.html')
@app.route("/table", methods = ['POST','GET'])
def table():
if request.method == 'GET': //When button pressed on homepage
dict_table = get_table() //return list of dictionaries of names and ages
return render_template('table.html', dict_table=dict_table)
if __name__ == '__main__':
app.run(debug=True)
HTML 文件 table.html
<!DOCTYPE html>
<html>
<head>
<title>Display Table</title>
<script type="text/javascript" src="/scripts/app.js"></script>
</head>
<body>
<table id="table">
{% if dict_table %}
<tr>
{% for key in dict_table[0] %}
<th onclick="sortTable(1)" style="cursor:crosshair">{{ key }}</th>
{% endfor %}
</tr>
{% endif %}
{% for dict in dict_table %}
<tr>
{% for value in dict.values() %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</body>
</html>
所以表格在我的网络浏览器上正确显示。我在我的 app.js 脚本中使用了他们在 W3 学校网站上教授的排序功能。
应用程序.js
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
dir = "asc";
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
这是我从https://www.w3schools.com/howto/howto_js_sort_table.asp获得的示例
到目前为止,这些是我的问题
- 当我调用该函数 sortTable 时,在示例中,它们为 sortTable(n) 提供参数 0 和 1,因为它们的表不像我的那样动态呈现。如果我尝试使用该函数对我的表进行排序,我该如何处理这种情况,因为我的表是动态创建的?我指的是线在我的 HTML 文件中。我找不到他们教如何处理这种情况的资源,我想学习。
- 如果我给它一个参数 1,当我点击我的表头时,什么也没有发生。有人可以指导我找出错误所在以及如何解决吗?我在想这是因为表是在创建标题后在循环中创建的,所以它没有什么可以迭代的。
如果有人可以指导我完成此操作,我会很高兴。我也愿意听取我是否有更好的方法来做到这一点,只要它不是过于复杂并且涉及安装外部应用程序,比如我见过的类似问题的一些解决方案(因为我只是初学者并试图学习)。谢谢!
解决方案
函数n
中的sortTable
参数是行数。当您渲染表格的标题时,您总是通过 1。要修复它,您可以尝试
{% for key in dict_table[0] %}
<th onclick="sortTable({{ loop.index0 }})" style="cursor:crosshair">{{ key }}</th>
{% endfor %}
这应该够了吧。
欲了解更多信息,请访问此jinja 技巧页面和完整的jinja 文档。
UPD还有一个控制结构列表。
推荐阅读
- reactjs - React+typescript : How to change the state if I take it in as an array?
- python - 在二维 Numpy 数组中查找值 x,y,z 的行
- list - Flutter/Dart:从下拉菜单中的变量定义列表
- java - Method used alongside OnCreate() to update an activity?
- ruby-on-rails - 如何让 RSpec 在 VSCode 中使用调试器 IDE
- amazon-web-services - 限制每个用户池的注册数量
- flutter - 我在我的系统上从 github 克隆了一个颤振项目,当我尝试获取所需的包时出现以下错误
- curl - 如何使用 Zoho CRM v2 API 添加 Zoho CRM 潜在客户
- list - 从批处理脚本中的列表远程获取序列号和型号
- c# - 无法使用 LINQ WPF C# 将数据插入数据库