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

TableSorter Custom Parser not sorting correctly on Chrome

本文关键字：排序不正确 Chrome 自定义分析器 TableSorter 更新时间：2023-09-26

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

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

这里至少有两个问题：

我在Firefox中有一个，但当我在Chrome中加载它时，它的排序似乎是随机的。我确信我在数组的某个地方加载了错误的东西，但我不确定它是什么
"rating"列在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>

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

演示使用了两个版本的表分类器，javascript框架中包含的原始表分类器（v2.0.5）（位于底部）和从CDN加载的我的表分类器分支。它们都使用相同的解析器代码，所以这不是问题。

但是，自定义解析器代码有两个问题（修复了演示）：

当替换完成时，它被一个数字（数值）替换，但它实际上仍然是一个字符串。所以我把这些值用引号括起来，否则前面的零将被删除。这对表分类器的fork来说不是问题，因为它使用了自然排序，但原来的表分类器使用了标准排序，不会像你所期望的那样对字符串中的数字进行排序
因为我们实际上是在处理字符串，所以解析器类型需要更改为"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（如果需要支持旧IE，则使用jQuery $.inArray）来获取位置。该解析器将是一个"数字"类型（演示）

// 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'
});

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

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

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

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