DataTables не сортируются должным образом

Question

Я использую DataTables для своего проекта, но его функция сортировки не работает должным образом. Я попробовал все решения здесь, но ни одно из них не сработало для меня, а также не показывает ошибку в консоли. Я думаю, что в моем коде есть конфликт JQuery. Как я могу решить эту проблему? любая помощь?

<table id="dtBasicExample" class="table table-bordered table-hover contact-list" cellspacing="0"
                       width="100%">
                    <thead>
                    <tr>
                        {#                            <th scope="col"><input type="checkbox"></th>#}
                        <th scope="col">Name</th>
                        <th scope="col">Company Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Phone Number</th>
                    </tr>
                    </thead>
                    {% for contact in contacts %}
                        <tbody>
                        <tr data-id="{{ contact.id }}" class="clickable-row"
                            data-href="{% url 'contact-detail' contact.id %}"
                            style="cursor: pointer; ">
                            {#                                <th scope="row"><input type="checkbox" id="check"></th>#}
                            <td>{{ contact.client_name }}</td>
                            <td>{{ contact.client_company_name }}</td>
                            <td>{{ contact.email }}</td>
                            <td>{{ contact.work_phone }}</td>
                        </tr>
                        </tbody>
                    {% endfor %}
                </table>
                {% csrf_token %}

$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');

, как вы можете видеть, это материал данных начальной загрузки. В показанном примере это работает, но когда я добавляю в свой проект, это не так.

Answer 1

Ваша HTML-таблица "недопустима" ( Она действительна, если вы хотите создать несколько таблиц в родительской таблице ). Это может сделать некоторые проблемы с Datatable. Я думаю, что сортировка выполнена, но вы ее не видите, потому что она сортируется по тегу tbody, и есть одна строка, отсортированная по tbody. Теги tbody не сортируются только внутри тега

Попробуйте удалить tbody в свой цикл и экспортировать его вне цикла for.

<tbody>
  {% for contact in contacts %}
  // ...
  {% endfor %}
</tbody>

---

Примечание : cellspacing="0" - старая версия html. Вы можете заменить его свойством css border-spacing