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, 'helpchangelog.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方面有一些问题?改变";订单":[[2,"desc"]][;到asc对FF不起作用。

很可能,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将通过检查列中的数据是否与任何给定类型匹配,自动检测具有日期数据的列。如果DataTable包含多个日期列,则可以注册多种日期格式。

尝试显式添加"排序: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>

与其说是答案,不如说是建议,但我不想在评论中粘贴此代码。

相关内容

最新更新