使用 JavaScript 在 HTML 中对 Python/Flask 中动态呈现的表格进行排序

Question

这是我第一次构建 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，当我点击我的表格标题时，什么也没有发生。 有人可以指导我了解我的错误在哪里以及如何解决吗？ 我认为这是因为表是在创建标题后在循环中创建的，因此它没有任何可迭代的内容。

如果有人可以指导我完成此操作，我会很高兴。 我也很乐意听取我是否有更好的方法来做到这一点，只要它不是过于复杂并且涉及安装外部应用程序，例如我见过的类似问题的一些解决方案（因为我只是初学者并试图学习）。 谢谢！

Answer 1

Paremeter n在sortTable功能是行的数量。 当你渲染表格的标题时，你总是通过 1。要修复它，你可以尝试

{% for key in dict_table[0] %}
  <th onclick="sortTable({{ loop.index0 }})" style="cursor:crosshair">{{ key }}</th>
{% endfor %}

这应该够了吧。

有关更多信息，请访问此jinja 技巧页面和完整的jinja 文档。

UPD还有一个控制结构列表。

使用 JavaScript 在 HTML 中对 Python/Flask 中动态呈现的表格进行排序

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-15 04:56:56

使用 JavaScript 在 HTML 中对 Python/Flask 中动态呈现的表格进行排序

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-15 04:56:56

解决方案1
1 已采纳 2019-02-15 04:56:56