Javascript TableSorter自定义解析器在Chrome上排序不正确

我正在尝试为TableSorter编写一个自定义解析器，它将允许我在HTML5表的多个标题中动态排序字母等级。我疯狂地在谷歌上搜索，找不到这样的例子

我对这一点还不熟悉，但我认为这对课堂排序、QA报告等非常有帮助。在这里，我将把Free2Work品牌排名排序为我可以在智能手机上使用的内容

这里至少有两个问题：

我有一个在Firefox中工作，但当我在Chrome中加载它时，排序看起来是随机的。我肯定我在某处将错误的东西加载到数组中，但我不确定它是什么

Firefox中的“评级”列排序正确，但其他列似乎没有。对所有列使用相同的解析器

下面是我正在使用的JavaScript：

       $.tablesorter.addParser({
            id: 'grades',
            is: function(s) {
                    return false;
            },
            format: function(s) {
                    // format your data for normalization
                    return s.toLowerCase()
                            .replace("a+",12)
                            .replace("a",11)
                            .replace("a-",10)
                            .replace("b+",09)
                            .replace("b",08)
                            .replace("b-",07)
                            .replace("c+",06)
                            .replace("c",05)
                            .replace("c-",04)
                            .replace("d+",03)
                            .replace("d",02)
                            .replace("d-",01)
                            .replace("f",00);
            },
            type: 'numeric'
    });

    $(function() {
            $('#brands').tablesorter({
                    headers: {
                            2: {sorter:'grades'},
                            3: {sorter:'grades'},
                            4: {sorter:'grades'},
                            5: {sorter:'grades'},
                            6: {sorter:'grades'}
                    }
            });
    }); 

这里是[被截断的]html

<table id="brands" class="tablesorter table striped">
    <caption>
        Brand Ratings
    </caption>
    <thead>
        <tr>
            <th>Logo</th>
            <th>Brand</th>
            <th class="extractor-select sorter-grades">Rating</th>
            <th class="extractor-select sorter-grades">Policy</th>
            <th class="extractor-select sorter-grades">Honesty</th>
            <th class="extractor-select sorter-grades">Monitor</th>
            <th class="extractor-select sorter-grades">Workers</th>
            <th>More</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="brand-logo"></td>
            <td class="brand-name">Etiko</td>
            <td class="brand-overall-grade aplus">A+</td>
            <td class="aplus">A+</td>
            <td class="aplus">A+</td>
            <td class="a">A</td>
            <td class="aplus">A+</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/1268">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"></td>
            <td class="brand-name">Pants to Poverty</td>
            <td class="brand-overall-grade aplus">A+</td>
            <td class="aplus">A+</td>
            <td class="aplus">A+</td>
            <td class="a">A</td>
            <td class="aplus">A+</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/1270">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/playtex_logo_black0.jpg"></td>
            <td class="brand-name">Playtex</td>
            <td class="brand-overall-grade a">A</td>
            <td class="aminus">A-</td>
            <td class="a">A</td>
            <td class="a">A</td>
            <td class="aminus">A-</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/458">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/Hanes_Logo0.jpg"></td>
            <td class="brand-name">Hanes</td>
            <td class="brand-overall-grade a">A</td>
            <td class="aminus">A-</td>
            <td class="a">A</td>
            <td class="a">A</td>
            <td class="aminus">A-</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/456">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"></td>
            <td class="brand-name">Voodoo Hosiery</td>
            <td class="brand-overall-grade b">B</td>
            <td class="aminus">A-</td>
            <td class="bminus">B-</td>
            <td class="b">B</td>
            <td class="d">D</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/1077">Scorecard</a>
            </td>
        </tr>
        <tr>
            <td class="brand-logo"><img src="http://widgets.free2work.org/images/Brand/AmericanBodyArmor0.jpg"></td>
            <td class="brand-name">American Body Armor</td>
            <td class="brand-overall-grade f">F</td>
            <td class="f">F</td>
            <td class="f">F</td>
            <td class="f">F</td>
            <td class="f">F</td>
            <td class="score-card-button">
                <a href="http://widgets.free2work.org/frontend_ratings/public_view/750">Scorecard</a>
            </td>
        </tr>
    </tbody>
</table>

品牌评级
标志
烙印
评级
政策
诚实
班长
工人
更多
埃蒂科
A+
A+
A+
A.
A+
渴望贫穷
A+
A+
A+
A.
A+
倍得适
A.
A-
A.
A.
A-
哈内斯
A.
A-
A.
A.
A-
巫毒袜
B
A-
B-
B
D
美国防弹衣
F
F
F
F
F

---

有人知道我是怎么误解这里的东西的吗？我有点不知所措。

似乎演示使用了两个版本的tablesorter，javascript框架（底部）中包含的（v2.0.5）和从CDN加载的my。它们都使用相同的解析器代码，所以这不是问题

但是，自定义解析器代码（）存在两个问题：

• 当替换完成时，它被一个数字（数值）替换，但它实际上仍然是一个字符串。所以我把这些值用引号括起来，否则前导零将被删除。这对于fork of tablesorter不是问题，因为它使用自然排序，但最初使用的是标准排序，它不会像您预期的那样对字符串中的数字进行排序
• 因为我们实际上是在处理字符串，所以需要将解析器类型更改为“text”

以下是更新的解析器cdoe：

$.tablesorter.addParser({
  id: 'grades',
  is: function(s) {
    return false;
  },
  format: function(s) {
    // format your data for normalization
    return s.toLowerCase()
      .replace("a+", '12')
      .replace("a", '11')
      .replace("a-", '10')
      .replace("b+", '09')
      .replace("b", '08')
      .replace("b-", '07')
      .replace("c+", '06')
      .replace("c", '05')
      .replace("c-", '04')
      .replace("d+", '03')
      .replace("d", '02')
      .replace("d-", '01')
      .replace("f", '00');
  },
  type: 'text'
});

另一种不需要设置数值的方法是将值添加到数组中，然后使用

indexOf

（或者jQuery

$.inArray

，如果需要支持旧IE）来获取位置。该解析器将是“数值”类型（）

关于原始和fork之间差异的最后一点是如何设置解析器

• 原始版本仅允许在

  标题

  选项中设置列解析器

  $(function() {
      $('#brands').tablesorter({
          headers: {
              2: {sorter:'grades'},
              3: {sorter:'grades'},
              4: {sorter:'grades'},
              5: {sorter:'grades'},
              6: {sorter:'grades'}
          }
      });
  }); 
  

• 货叉仍然可以在

  标题

  选项中设置分拣机，但也可以使用标题上的类名设置分拣机

  <th class="extractor-select sorter-grades">Rating</th>
  

  评级
  

  *注意：除非每个单元格都包含
  元素并且加载了

  解析器输入select.js

  文件，否则类名中的“提取器选择”将不起作用

---

如果有人感兴趣，这里有一把小提琴：

<th class="extractor-select sorter-grades">Rating</th>