CODEWITHSUNDEEP
jquerytablesorter
A.A.
A.A.

Reputation: 442

jquery tablesorter not working with flask or for-loop-generated tables?

The problem

I have a web-app using Flask that generates html table using for-loop. I am able to get demo/example tables not generated with for-loops to sort. But I can't get this one to be sortable. Here is my code:

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, just in case:

<!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>

Upvotes: 0

Views: 360

Answers (1)

A.A.
A.A.

Reputation: 442

Okay, resolved this myself after more experimenting. Apparently the problem was that index.html as not loading the scripts because the layout.html was overriding the head tag contents with its own head tag contents.

Moving the script tags into the layout HTML resolved the problem:

<!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>

Upvotes: 1

Related Questions