jquery tablesorter ne fonctionne pas avec les tables flask ou for-loop-generated?

Le problèmejquery tablesorter ne fonctionne pas avec les tables flask ou for-loop-generated?

j'ai-application web en utilisant Flask qui génère la table HTML à l'aide de la boucle. Je suis en mesure d'obtenir des tables de démo/exemple non générées avec des boucles pour trier. Mais je ne peux pas rendre celui-ci triable. Voici mon 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, juste au cas où:

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

Source

2017-04-11 Amr A.

Est-ce que produire HTML valide? Les liens suivant et précédent sont en dehors de la ligne du tableau. En outre, voyez-vous des erreurs dans la console? Que montre l'option 'debug' de tablesorter? – Mottie

Oui, le HTML fonctionne bien. Les liens suivant et précédent sont juste pour la pagination bien que je me demande si cela jette hors tension. Je ne savais pas que tablesorter avait une option de débogage je vais regarder dans ça! –

La seule chose que je peux penser est a) tablesorter n'aime pas ma pagination ou b) il ne fonctionne pas avec les tables générées par itération (semble peu probable). –

D'accord, résolu moi-même après plus expérimenter. Apparemment, le problème était que index.html ne chargeait pas les scripts parce que layout.html remplaçait le contenu de la balise head avec son propre contenu.

Déplacement des balises de script dans la mise en page HTML résolu le problème:

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

Source

2017-04-12 13:44:30

jquery tablesorter ne fonctionne pas avec les tables flask ou for-loop-generated?

Répondre

Questions connexes