Question

问题

我有一个使用Flask的web应用程序，它使用for循环生成html表。我能够使用for循环生成的demo / example表进行排序。但我不能让这个可以排序。这是我的代码：

的index.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 %}

layout.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>

Answer 1

好的，经过更多的实验，我自己解决了这个问题。显然问题是index.html没有加载脚本，因为layout.html用头标签内容覆盖了head标签内容。

将脚本标记移动到布局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>

jquery tablesorter不使用flask或for循环生成的表？

1 个答案: