Порядок таблиц нарушен в Firefox, но работает нормально в других браузерах

У меня есть таблица, которую я сортирую по дате, она отлично работает в 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})

Любая информация помогает! :)

Попробуйте явно добавить "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>

Скорее предложение, чем ответ, но не хотелось вставлять этот код в комментарии.

Скорее всего, используемый вами формат даты не поддерживается 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>

Далее, зарегистрируйте формат(ы) даты, которые вы хотите, чтобы DataTables определял и упорядочивал, используя метод $.fn.dataTable.moment(format). Например:

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

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

Вернуться на верх