jQuery Tablesorter 不适用于 flask 或 for 循环生成的表

>问题

我有一个使用 Flask 的网络应用程序，它使用 for 循环生成 html 表。我能够获得未使用 for 循环生成的演示/示例表进行排序。但我无法让这个可排序。这是我的代码：

索引.html

{% extends "layout.html" %}
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
    <script>
        $(document).ready(function()
            {
                $("#subTable").tablesorter();
            }
        );
    </script>
    {% block title %}
        SRA Submissions Status Report
    {% endblock %}
</head>
{%  block main %}
    <h2>SRA Submissions Status Report</h2>
    <form action="{{ url_for('index') }}" method="post">
        <fieldset>
            <div class="form-group" align="center">
                <input autocomplete="off" autofocus class="form-control" name="spuid" placeholder="Spuid" type="text"/>
                <input autocomplete="off" autofocus class="form-control" name="accession" placeholder="Accession" type="text"/>
                <input autocomplete="off" autofocus class="form-control" name="bioproject" placeholder="Bioproject" type="text"/>
                <input autocomplete="off" autofocus class="form-control" name="biosample" placeholder="Biosample" type="text"/>
                <input autocomplete="off" autofocus class="form-control" name="submission_status" placeholder="Submission Status" type="text"/>
                <button class="btn btn-default" type="submit" name="filter">Filter</button>
                <button class="btn btn-default" type="submit" name="reset">Reset</button>
                <button class="btn btn-default" type="submit" name="download">Download</button>
            </div>
        <p>{{ msg }}</p>
        </fieldset>
    </form>
    <table id="subTable" class="tablesorter">
    <thead>
        <tr>
            {% for header in headers %}
            <th>{{ header }}</th>
            {%  endfor %}
        </tr>
        </thead>
        <tbody>
        {% for sub in submissions.items %}
        <tr>
            <td>{{ sub.spuid }}</td>
            <td>{{ sub.spuid_date }}</td>
            <td>{{ sub.g_number }}</td>
            <td>{{ sub.accession }}</td>
            <td>{{ sub.bioproject }}</td>
            <td>{{ sub.biosample }}</td>
            <td>{{ sub.release_date }}</td>
            <td>{{ sub.ncbi_submission_id }}</td>
            <td>{{ sub.submission_status }}</td>
            <td>{{ sub.response_message }}</td>
            <td>{{ sub.response_severity }}</td>
            <td>{{ sub.read_file }}</td>
            <td>{{ sub.temp_path }}</td>
        </tr>
        {% endfor %}
        {% if submissions.has_prev %}
            <a href="{{ url_for('index', page=submissions.prev_num) }}">&lt;&lt; Prev</a>
        {% else %}&lt;&lt; Prev
        {% endif %} |
        {% if submissions.has_next %}
            <a href="{{ url_for('index', page=submissions.next_num) }}">Next &gt;&gt;</a>
        {% else %}Next &gt;&gt;
        {% endif %}
        </tbody>
    </table>
{%  endblock %}

布局.html，以防万一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../static/style.css">
    <title>{% block title %}{% endblock %}</title>
</head>
    <body>
        <main>
            {% block main %}
            {% endblock %}
        </main>
    </body>
</html>

好的，经过更多实验后自己解决了这个问题。显然，问题在于索引.html因为布局而没有加载脚本.html用自己的头标签内容覆盖了头标签内容。

将脚本标记移动到布局 HTML 中解决了问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../static/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
    <script>
        $(document).ready(function()
            {
                $("#subTable").tablesorter(
                    {debug: true}
                );
            }
        );
    </script>
    <title>{% block title %}{% endblock %}</title>
</head>
    <body>
        <main>
            {% block main %}
            {% endblock %}
        </main>
    </body>
</html>

相关内容

最新更新

热门标签：