javascript - Tablesorter 仅按降序对习惯解析的数字进行正确排序，升序是错误的

Question

使用Mottie's fork of tablesorter 。需要以“Jan 16”格式对日期进行排序。从八月到七月。

编写了一个自定义解析器。

let monthsFirstDayIndexes = {
    'Aug': 0,
    'Sep': 31,
    'Oct': 61,
    'Nov': 92,
    'Dec': 122,
    'Jan': 153,
    'Feb': 184,
    'Mar': 213,
    'Apr': 244,
    'May': 274,
    'Jun': 305,
    'Jul': 335,
  }

$.tablesorter.addParser({
  id: 'date',
  is: function() {
    return false;
  },

  format: function(s) {
    dateSplitted = s.split(' ')
    return monthsFirstDayIndexes[dateSplitted[0]] + Number(dateSplitted[1])
 },

     type: 'numeric'
  });

我正在使用 Django 模板的解析器

{% extends 'base.html' %}
{% load static %}
{% load tags %}

{% block title %}
  {{ player.name }} - Game Log - NHL stats tracker
{% endblock title %}

{% block styles %}
  <link rel="stylesheet" href="{% static 'players/tablesorter.css' %}">
{% endblock styles %}

{% block content %}
      <img class="rounded-circle account-img" src="{{ player.image.url }}">
             <h5>{{ player.name }} Game Log</h5>
             <a href="{% url 'player_detail' player.slug player.nhl_id %}">Return to the full profile</a><br>
            <!-- GOALIES       -->
              {% if player.position_abbr == 'G' %}
              <!-- GAMELOG       -->
              <table id="tab1" class="tablesorter">
                <thead>
                  <tr>
                    <th>Date</th>
                    <th>Opp</th>
                    <th>Res</th>
                    <th>Min</th>
                    <th>GA</th>
                    <th>SV %</th>
                    <th>SV</th>
                    <th>SA</th>
                    <th>SHO</th>
                  </tr>
                </thead>
                <!-- PAGER -->
                <tfoot>
                  <tr class="tablesorter-ignoreRow">
                    <th colspan="28" class="pager"></th>
                  </tr>
                  <tr class="tablesorter-ignoreRow">
                    <th colspan="28" class="pager-g form-horizontal pager">
                      <button type="button" class="btn first"><i class="small material-icons">first_page</i></button>
                      <button type="button" class="btn prev"><i class="small material-icons">navigate_before</i></button>
                      <span class="pagedisplay"></span>
                      <button type="button" class="btn next"><i class="small material-icons white">navigate_next</i></button>
                      <button type="button" class="btn last"><i class="small material-icons">last_page</i></button>
                      <select class="pagesize browser-default" title="Select page size">
                        <option selected="selected" value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="all">All</option>
                      </select>
                    </th>
                  </tr>
                </tfoot>
                <tbody>
                {% for game in player.gamelog_stats %}
                  <tr>
                    <td>{{ game.date }}</td>
                    <td>{{ game.opponent.id }}</td>
                    <td>{{ game.stat.decision }}</td>
                    <td>{{ game.stat.timeOnIce }}</td>
                    <td>{{ game.stat.goalsAgainst }}</td>
                    <td>{{ game.stat.savePercentage|floatformat:3 }}</td>
                    <td>{{ game.stat.saves }}</td>
                    <td>{{ game.stat.shotsAgainst }}</td>
                    <td>{{ game.stat.shutouts }}</td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>

              {% else %}
              <!-- SKATERS       -->
              <table id="tab2" class="sortable">
                <thead>
                  <tr>
                    <th class="sorter-date">Date</th>
                    <th>Opp</th>
                    <th>G</th>
                    <th>A</th>
                    <th>Pts</th>
                    <th>+/-</th>
                    <th>PIM</th>
                    <th>SOG</th>
                    <th>Hits</th>
                    <th>Blk</th>
                    <th>FW</th>
                    <th>PPP</th>
                    <th>SHP</th>
                    <th class="sorter-countdown">TOI</th>
                    <th class="sorter-countdown">TOI PP</th>
                    <th class="sorter-countdown">TOI SH</th>
                  </tr>
                </thead>
                <!-- PAGER -->
                <tfoot>
                  <tr class="tablesorter-ignoreRow">
                    <th colspan="28" class="pager"></th>
                  </tr>
                  <tr class="tablesorter-ignoreRow">
                    <th colspan="28" class="pager-s form-horizontal pager">
                      <button type="button" class="btn first"><i class="small material-icons">first_page</i></button>
                      <button type="button" class="btn prev"><i class="small material-icons">navigate_before</i></button>
                      <span class="pagedisplay"></span>
                      <button type="button" class="btn next"><i class="small material-icons white">navigate_next</i></button>
                      <button type="button" class="btn last"><i class="small material-icons">last_page</i></button>
                      <select class="pagesize browser-default" title="Select page size">
                        <option selected="selected" value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="all">All</option>
                      </select>
                    </th>
                  </tr>
                </tfoot>
                <tbody>
                {% for game in player.gamelog_stats %}
                  <tr>
                    <td>{{ game.date }}</td>
                    <td>{{ game.opponent.id }}</td>
                    <td>{{ game.stat.goals }}</td>
                    <td>{{ game.stat.assists }}</td>
                    <td>{{ game.stat.points }}</td>
                    <td>{{ game.stat.plusMinus }}</td>
                    <td>{{ game.stat.pim }}</td>
                    <td>{{ game.stat.shots }}</td>
                    <td>{{ game.stat.hits }}</td>
                    <td>{{ game.stat.blocked }}</td>
                    <td>{{ game.stat.faceOffWins }}</td>
                    <td>{{ game.stat.powerPlayPoints }}</td>
                    <td>{{ game.stat.shortHandedPoints }}</td>
                    <td>{{ game.stat.timeOnIce }}</td>
                    <td>{{ game.stat.powerPlayTimeOnIce }}</td>
                    <td>{{ game.stat.shortHandedTimeOnIce }}</td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
              {% endif %}
{% endblock content %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.js"></script>
<!-- Widgets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.widgets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/extras/jquery.tablesorter.pager.min.js"></script>

<script src="{% static 'players/parser-duration.js' %}"></script>
<script src="{% static 'players/parser-date.js' %}"></script>
<script src="{% static 'players/sorting_player_gamelog.js' %}"></script>
{% endblock scripts %}

按照asc顺序排序的结果。问题是天数 < 10 的日期排序顺序错误。

降序顺序正确。

还尝试使用parseInt(dateSplitted[1])而不是Number(dateSplitted[1])。它产生了更奇怪的结果。

在纯 JS 中测试相同的解析方法，并使用自定义排序。它有效。

let monthsFirstDayIndexes = {
    'Aug': 0,
    'Sep': 31,
    'Oct': 61,
    'Nov': 92,
    'Dec': 122,
    'Jan': 153,
    'Feb': 184,
    'Mar': 213,
    'Apr': 244,
    'May': 274,
    'Jun': 305,
    'Jul': 335,
  }

let dates = [
  'Mar 3',
  'Nov 24',
  'Nov 25',
  'Sep 14',
  'Mar 5',
  'Mar 7',
  'Jan 25',
  'Sep 8',
  'Mar 16',
  'Jan 12',
  'Mar 8',
]

dateSplitted = dates.map(item => item.split(' '));

function sortFunc(a, b) {
  return (monthsFirstDayIndexes[a[0]] + Number(a[1])) - (monthsFirstDayIndexes[b[0]] + Number(b[1]));
}

console.log(dateSplitted.sort(sortFunc).map(item => item.join(' ')));

关于如何使其适用于 tablesorter 有什么想法吗？问题是我真的不知道如何在这种情况下调试我的代码，如何查看它从 html 代码中的日期解析的实际数字。

Answer 1

问题实际上不在于 JavaScript。我很困惑，因为页面上显示的所有日期都没有符号之间的额外空格。但是在所有日期 < 10 的日期中都有一个额外的空格。我在检查 HTML 源代码时发现了这一点。

Django 脚本中存在一个错误，该脚本将日期格式从 API 源加载并转换为我的数据库。

def date_convert(date):
    datetime_obj = datetime.datetime.strptime(date, '%Y-%m-%d')
    return datetime_obj.strftime('%b %e')

我已将日期格式从 %d(零填充)更改为 %e(无零填充)。因此，它为一位数的天数而不是零添加了额外的空间。并且 Number(dateSplitted[1] 等于 0，而不是我期望的日期数字。因此，所有具有 1 位数日期的日期都按照 monthsFirstDayIndexes 进行排序给定的月份，没有添加实际的天数。

所以我需要使用零填充或删除多余的空间。我决定采用第二种选择。使用正则表达式

import re 

def date_convert(date):
    datetime_obj = datetime.datetime.strptime(date, '%Y-%m-%d')
    date_str = datetime_obj.strftime('%b %e')
    return re.sub(r'\s+', ' ', date_str)

我还想补充一点，如果我知道我可以将任何我想要的内容记录到浏览器控制台(例如 Firefox 中的 F12)，我就可以轻松找到错误的根源。该图片清楚地显示某些日期中有额外的空格，因此解析器没有生成我期望的数字。这些知识可以为您节省一些时间。顺便说一句，在这种情况下，console.log 名称有点明显。

。