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

I have a table that I sort by date, it works fine in EDGE and Chrome, but the order is messed in Firefox. A series of rows that should be on top got moved down to the bottom.
HTML:

<div >
    <div >
        <div >
            <h6 >Change Log Items</h6>
            <div >
                <table id="changes" >
                    <thead >
                        <tr >
                            <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  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>

View:

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

Any information helps! :)

Update: I realized the problem was caused by the jQuery corresponding to the HTML element:

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

Seems like DataTable has some issues with FF? Changing the order in "order": [[ 2, "desc" ]]" to asc doesn't work for FF.

CodePudding user response：

Try explicitly adding "ordering: true" to your DataTable() instantiation, like so:

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

More a suggestion than an answer, but didn't want to paste this code in the comments.

CodePudding user response：

Most likely, the date format you are using is not supported by Firefox, as "the date formats supported by each browser vary significantly". In such cases, one could use the "ultimate" date / time ordering plug-in for DataTables, as suggested here. To do that, include the following libraries in your HTML file, as described in the above 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>

Next, register the date format(s) that you wish DataTables to detect and order using the $.fn.dataTable.moment(format) method. For instance:

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

DataTables will automatically detect the column(s) with date data, by checking to see if the data in a column matches any of the given types. You can register multiple date formats, if a DataTable contains more than one date columns.