jquery tablesorter不能使用燒瓶或for-loop生成的表？

問題jquery tablesorter不能使用燒瓶或for-loop生成的表？

我有一個Web應用程序使用Flask，使用for-loop生成html表。我能夠獲取演示/示例表，而不是用for循環生成的排序。但我無法得到這個可排序的。這裏是我的代碼：

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

來源

2017-04-11 Amr A.

不會產生有效的HTML？ next和prev鏈接位於表格行之外。另外，你是否看到控制檯中的任何錯誤？ tablesorter的'debug'選項顯示什麼？ – Mottie

是的，HTML工作正常。下一個和prev鏈接只是爲了分頁，但我想知道是否會拋出tablesorter。我不知道tablesorter有一個調試選項，我會研究它！ –

我能想到的唯一的事情是a）tablesorter不喜歡我的分頁或者b）它不能用於迭代生成的表格（似乎不太可能）。 –

好了，經過試驗解決了這個自己。顯然，問題在於index.html沒有加載腳本，因爲layout.html用自己的head標籤內容覆蓋了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>

來源

2017-04-12 13:44:30

jquery tablesorter不能使用燒瓶或for-loop生成的表？

回答

相關問題