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

升序排列的结果。问题是天数 < 10 的日期排序错误。

desc顺序没问题

还尝试使用 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。我感到困惑，因为在页面上显示的所有日期在符号之间没有额外的 spaces。但是在 day < 10 的所有日期中都有一个额外的 space。我在检查 HTML 源代码时发现了这一点。

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

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

我已将日期格式从 %d（零填充）更改为 %e（无零填充）。所以它将额外的 space 添加到 1 位数的天而不是零。 Number(dateSplitted[1] 等于零，而不是我预期的天数。因此，对于给定月份，所有具有 1 位数天数的日期都按 monthsFirstDayIndexes 排序，没有添加实际天数。

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

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），我就可以很容易地找到错误的来源。图片清楚地表明在某些日期有一个额外的 space 并且由于它解析器没有产生我预期的数字。这些知识可以为您节省一些时间。 console.log 名称在这种情况下很明显。

。

Tablesorter 仅按降序对自定义解析的数字进行正确排序，升序是错误的

Tablesorter sorts customely parsed numbers properly only in descending order, ascending order is wrong

javascript

sorting

django

jquery

tablesorter