TableSorter 自定义解析器无法在 Chrome 上正确排序答案

【问题标题】：TableSorter Custom Parser not sorting correctly on ChromeTableSorter 自定义解析器无法在 Chrome 上正确排序
【发布时间】：2015-12-17 16:24:31
【问题描述】：

我正在尝试为 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>

任何人都知道我在这里如何误解了某些东西？我有点过头了。

【问题讨论】：

这里有一个小提琴，如果有人感兴趣的话：jsfiddle.net/01eL3a6w/1

标签： javascript html google-chrome sorting tablesorter

【解决方案1】：

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

但是，自定义解析器代码 (fixed demo) 存在两个问题：

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

这是一个更新的解析器 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（如果您需要支持旧的 IE，则使用 jQuery $.inArray）来获取位置。该解析器将是“数字”类型 (demo)

// put grades outside of the format function, so the split
// only needs to happen once
var grades = 'a+ a a- b+ b b- c+ c c- d+ d d- f'.split(' ');

$.tablesorter.addParser({
  id: 'grades',
  is: function(s) {
        return false;
  },
  format: function(s) {
    var val = $.inArray( ( s || '' ).toLowerCase(), grades );
    // return string if it isn't a grade (to allow sorting)
    return val > -1 ? val : s;
  },
  type: 'numeric'
});

关于 original 和 fork 区别的最后一点是如何设置解析器

原来只允许在headers选项内设置列解析器。

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

fork 仍然可以在headers 选项中设置排序器，但也可以使用标题中的类名来设置排序器
```
<th class="extractor-select sorter-grades">Rating</th>
```
* 注意：除非每个单元格都包含<select> 元素并且加载了parser-input-select.js 文件，否则类名中的“extractor-select”将不起作用。

【讨论】：