Джанго: как сортировать эту таблицу

Я реализован в следующей таблице:Джанго: как сортировать эту таблицу

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

Как я должен изменить эту таблицу, чтобы сделать вывод сортируется, нажав на заголовок?

Каковы предпосылки? Есть ли очень простой способ использовать тему начальной загрузки?

источник

2016-02-25 user2601983

Вы можете использовать один из готовых плагинов JQuery, попробуйте ниже тот, который должен работать, позвонив в библиотеку и добавить класс «tablesorter» для табличного тега: - http://tablesorter.com/docs/#Demo

источник

2016-02-25 12:12:41

Hello Usama Zaky, спасибо. Да, я знаю этот класс, но я не знаю, как его использовать. Мне нужно изменить:

А где добавить функции? – user2601983

прямо сейчас я разместил то, что я изменил. до сих пор нет эффекта ... – user2601983

Привет, Просто позвоните в библиотеки js, например , затем для включения класса в свой тег таблицы используйте <класс таблицы = "table table-striped tablesorter"> –

То, что я сделал в настоящее время:

Я скопировал 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>

Там до сих пор нет функции на столе для сортировки. Какая у меня ошибка?

источник

2016-02-25 16:50:58 user2601983

Смежные вопросы

Джанго: как сортировать эту таблицу

ответ

Смежные вопросы