javascript - 数据表排序不正确

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');

如您所见，这是一个 Material 引导设计数据表。在所示的示例中，它可以工作，但是当我添加到我的项目时，它不能工作。

Answer 1

您的 html 表“无效”(如果您想在父表中创建多个表，则该表有效)。这可能会给数据表带来一些问题。我认为排序已完成，但您看不到它，因为它按 tbody 标签排序，并且有一行按 tbody 排序。 tbody 标签未排序，仅对里面的 tr 进行排序

尝试将 tbody 删除到循环中并将其导出到 for 循环之外。

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

---

注意:cellspacing="0"是旧版本的html。您可以通过 css 属性 border-spacing

替换它