python - 通过单击 Django Web 中的表头列对表进行排序

Question

所以我在 django 中有一个网站。 我有一个表，其中有一些列，例如服务器名称、IP 等。 我想要列标题来对整个列进行排序。 例如，当我单击 ServerName 列时，它将按 ServerName 的 ABC 顺序对所有项目进行排序。

我听说过 django-sorting-bootstrap 但指南看起来很复杂。 有没有更简单或好的指南可以做到这一点？ 这个想法是点击头上的箭头，它将对其进行排序(它就像一个链接)。

index.html表格-

<div class="container">

    <br>
    <center><h1>DevOps Server List</h1></center>
    <br>
    <form method='GET' action=''>
        <input type='text' name='q' placeholder='Search Item'/>
        <input type='submit' value='Search' />
    </form>
    <table class="table table-hover">
    <thead>

      <tr>
        <th> Server Name </th>
        <th> Owner </th>
        <th> Project </th>
        <th> Description </th>
        <th> IP Address </th>
        <th> ILO </th>
        <th> Rack </th>
        <th> Status </th>
        <th>  </th>


    </tr>
    </thead>
    <tbody>

                {% for server in posts %}

        <tr>
          <div class ="server">
            <td>{{ server.ServerName }}</td>
            <td>{{ server.Owner }}</td>
            <td>{{ server.Project }}</td>
            <td>{{ server.Description }}</td>
            <td>{{ server.IP }}</td>
            <td>{{ server.ILO }}</td>
            <td>{{ server.Rack }}</td>
            <td>{{ server.Status }}</td>

            <td>


                        <button type="button" class="btn btn-primary" data-toggle="modal" href="#delete-server-{{server.id}}" data-target="#Del{{server.id}}">Delete <span class="glyphicon glyphicon-trash" </span></button>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#DeleteItem">Edit <span class="glyphicon glyphicon-pencil" </span></button>
                        <div id ="Del{{server.id}}" class="modal fade" role="document">
                            <div class="modal-dialog" id="delete-server-{{server.id}}">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Delete Confirmation</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                    </button>
                                        </div>
                                        <div class="modal-body">
                                        <form action="{% url 'delete_post' server.id %}" method="post">{% csrf_token %}
                                            <h6>Are you sure you want to delete {{ server.ServerName }}?</h6>

                                            <input type="submit" class="btn btn-danger btn-md" value="Confirm delete"/>
                                                <button type="submit" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

                                        </form>
                                    </div>
                                    </div>


                        </div>
            </div>
            </td>
                </div>
        </tr>
                {% endfor %}
    </tbody>
</h5>
    </table>

Answer 1

我建议使用 JavaScript 插件在客户端进行排序。

例如:https://datatables.net/做得很好。

无论如何，你都需要 javascript 来做到这一点 - django 只会在服务器端。