Я впервые строю веб-приложение, и я хотел начать с нуля, чтобы изучить основы.Поэтому у меня был скрипт на 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>
Таким образом, таблица правильно отображается в моем веб-браузере.Я использовал функцию сортировки, которую они преподавали на веб-сайте школ W3, в моем скрипте app.js.
app.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, в примере они передают параметры 0 и 1 для sortTable(n) потому что их таблица не отображается динамически, как моя.Как мне справиться с этой ситуацией, если я пытаюсь использовать эту функцию для сортировки моей таблицы, так как моя таблица создается динамически?Я имею в виду строку в моем HTML-файле.Я не могу найти источники, где они учат, как справляться с этим сценарием, и я хотел бы узнать.
- Если я передаю ему параметр 1, когда я нажимаю на заголовок таблицы, ничего не происходит.Может ли кто-нибудь направить меня туда, где моя ошибка и как я могу это исправить?Я думаю, это потому, что таблица создается в цикле после того, как заголовки созданы, поэтому ей нечего перебирать.
Мне бы хотелось, чтобы кто-нибудь помог мне со всем этим справиться.Я также готов услышать, есть ли для меня более эффективные способы сделать это, если это не слишком сложно и требует установки внешних приложений, таких как некоторые решения, которые я видел, для подобных проблем (так как я простоначинающий и пытающийся учиться).Спасибо!