Firefox 中的表格顺序混乱，但在其他网络浏览器中工作正常

Question

我有一个按日期排序的表格，它在 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 has some issues with FF? 将 "order": [[ 2, "desc" ]]" 中的顺序更改为 asc 对于 FF 不起作用。

Answer 1

最有可能的是，Firefox 不支持您使用的日期格式，因为“每个网络浏览器支持的日期格式差异很大”。在这种情况下，可以使用 DataTables 的“终极”日期/时间排序插件，如建议的 这里。为此，请在 HTML 文件中包含以下库，如上面的链接所述：

<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( 注册您希望 DataTables 检测和排序的日期格式格式） 方法。例如：

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

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

Answer 2

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

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

更多是建议而不是答案，但不想将此代码粘贴到注释中。