Table 在 Firefox 中顺序混乱，但在其他浏览器中工作正常

Question

我有一个按日期排序的 table，它在 EDGE 和 Chrome 中工作正常，但在 Firefox 中顺序混乱。一系列应该在顶部的行被移到了底部。
HTML:

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <h6 class="card-header">Change Log Items</h6>
            <div class="card-body">
                <table id="changes" class="table table-striped table-hover table-bordered table-sm">
                    <thead class="table-dark">
                        <tr class="sticky">
                            <th>Title</th>
                            <th>Component</th>
                            <th>Date Committed</th>
                            <th>Jira Link</th>
                            <th>Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in logs %}
                        <tr>
                            <td>{{log.title}}</td>
                            <td>{{log.component}}</td>
                            <td>{{log.date_added}}</td>
                            <td>{% if log.jira_number %}<a class="general" href="https://jira.kinaxis.com/browse/{{log.jira_number}}" target="_blank">{{log.jira_number}}{% endif %}</a></td>
                            <td>{% if log.details %}{{log.details}}{% elif not log.details and log.jira_number %}See Jira ticket{% endif %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

查看：

@login_required
def change_log(request):
    logs = ChangeLog.objects.all().order_by('date_added')
    return render(request, 'help\changelog.html', {'logs': logs})

任何信息都有帮助！ :)

更新：我意识到问题是由对应于 HTML 元素的 jQuery 引起的：

<script type="text/javascript">
$(document).ready(function () {
    const exceptions = $('#changes').DataTable({
        "order": [[ 2, "desc" ]],
        "pageLength": 50,
        "columnDefs": [{"type": "date", "targets": [2],}], // Sort by Date properly
    });
});
</script>

DataTable 似乎与 FF 有一些问题？将 "order": [[ 2, "desc" ]]" 中的顺序更改为 asc 对 FF 不起作用。

Answer 1

尝试将“ordering: true”显式添加到您的 DataTable() 实例化中，如下所示：

<script type="text/javascript">
$(document).ready(function () {
    const exceptions = $('#changes').DataTable({
        ordering: true, # add this line
        "order": [[ 2, "desc" ]],
        "pageLength": 50,
        "columnDefs": [{"type": "date", "targets": [2],}], // Sort by Date properly
    });
});
</script>

建议多于答案，但不想在评论中粘贴此代码。

Answer 2

Firefox 很可能不支持您使用的日期格式，因为“每个浏览器支持的日期格式差异很大”。在这种情况下，可以按照建议 here 对数据表使用“最终”日期/时间排序 plug-in。为此，请在您的 HTML 文件中包含以下库，如上文 link:

中所述

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.11.5/sorting/datetime-moment.js"></script>

接下来，使用 $.fn.dataTable.moment(format) 方法注册您希望 DataTables 检测和排序的日期格式。例如：

$(document).ready(function() {
    $.fn.dataTable.moment( 'HH:mm MMM D, YY' );
    ...

DataTables 将通过检查列中的数据是否与任何给定类型匹配来自动检测包含日期数据的列。如果 DataTable 包含多个日期列，您可以注册多种日期格式。

Table 在 Firefox 中顺序混乱，但在其他浏览器中工作正常

Table order messed in Firefox, but works fine in other browsers

html

python

django

firefox

django-templates