Question

我已实施以下表格：

<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
  </head>
  <body>{% extends 'base.html' %}
    {% block content %}
    <title></title>
{{ form.errors }}
{{ form.non_field_errors }}

<form action="{% url "start" %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}

    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">my list</div>
      <div class="panel-body">
        <p>some informations</p>
      </div>
    <table class="table table-striped">
    <thead>

        <tr width="100%">
            <th align="left">1</th>
            <th align="left">2</th>
            <th align="left">3</th>
            <th align="left">4</th>
            <th align="left">5</th>
            <th align="left">6</th>
            <th align="left">7</th>
            <th align="right">8</th>
            <th align="left">9</th>
        </tr>

    </thead>
    <tbody>
    {% for Element in data %}
        <tr width="100%">
            <th align="left"><input type="checkbox" name="{{ Element.one }}" value="{{ Element.one }}"></th>
            <th align="left"><input type="radio" name="startingpoint" value="{{ Element.one }}"></th>
            <td align="left">{{ Element.two }}</td>
            <td align="left">{{ Element.three }}</td>
            <td align="left">{{ Element.four }}</td>
            <td align="left">{{ Element.five }}</td>
            <td align="left">{{ Element.six }}</td>
            <td align="center">{{ Element.seven }}</td>
            <td align="left">{{ Element.eight }}</td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
    </div>
    <input type="submit" value="Start" />
{% if form.errors %}
    {% for field in form %}
        {% for error in field.errors %}
            <div class="alert alert-error">
                <strong>{{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endfor %}
    {% for error in form.non_field_errors %}
        <div class="alert alert-error">
            <strong>{{ error|escape }}</strong>
        </div>
    {% endfor %}
{% endif %}
</form>
    {% endblock %}
  </body>
</html>

如何通过单击标题来修改此表以使输出可排序？

先决条件是什么？有没有一种非常简单的方法来使用bootstrap主题？

Answer 1

你可以使用一个现成的jQuery插件，尝试下面的一个应该通过调用库并添加类＆＃34; '3'＆＃34;到你的表标签： - http://tablesorter.com/docs/#Demo

Answer 2

我现在做了什么：

我将jquery-latest.js和jquery.tablesorter.js复制到* .html文件所在的文件夹中。

我改变了我的代码如下：

<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <script type="text/javascript" src="jquery-latest.js"></script> 
    <script type="text/javascript" src="jquery.tablesorter.js"></script> 
<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
</script>
  </head>
  <body>{% extends 'base.html' %}
    {% block content %}
    <title></title>
{{ form.errors }}
{{ form.non_field_errors }}

<form action="{% url "start" %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}

    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">my list</div>
      <div class="panel-body">
        <p>some informations</p>
      </div>
    <table id="myTable" class="table table-striped tablesorter">
    <thead>

        <tr width="100%">
            <th align="left">1</th>
            <th align="left">2</th>
            <th align="left">3</th>
            <th align="left">4</th>
            <th align="left">5</th>
            <th align="left">6</th>
            <th align="left">7</th>
            <th align="right">8</th>
            <th align="left">9</th>
        </tr>

    </thead>
    <tbody>
    {% for Element in data %}
        <tr width="100%">
            <th align="left"><input type="checkbox" name="{{ Element.one }}" value="{{ Element.one }}"></th>
            <th align="left"><input type="radio" name="startingpoint" value="{{ Element.one }}"></th>
            <td align="left">{{ Element.two }}</td>
            <td align="left">{{ Element.three }}</td>
            <td align="left">{{ Element.four }}</td>
            <td align="left">{{ Element.five }}</td>
            <td align="left">{{ Element.six }}</td>
            <td align="center">{{ Element.seven }}</td>
            <td align="left">{{ Element.eight }}</td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
    </div>
    <input type="submit" value="Start" />
{% if form.errors %}
    {% for field in form %}
        {% for error in field.errors %}
            <div class="alert alert-error">
                <strong>{{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endfor %}
    {% for error in form.non_field_errors %}
        <div class="alert alert-error">
            <strong>{{ error|escape }}</strong>
        </div>
    {% endfor %}
{% endif %}
</form>
    {% endblock %}
  </body>
</html>

桌面上仍然没有任何功能可以对其进行排序。我的错是什么？

Django：如何对此表进行排序

2 个答案: