使用 jQuery TableSorter 对包含下拉 (SELECT) 标签和美元符号 ($) 的列进行排序

Question

我正在使用出色的 jQuery TableSorter 插件自动向表的列添加排序功能（只需单击每列的标题即可）。除了其中几个列之外，这对所有列都完美无缺。

1) 该列的单元格之一的前面包含美元符号（例如：$20、$10、$5）。排序不能正常进行；它按字母顺序排序（并且由于所有单元格内容都以 $ 开头，因此它们都错误地捆绑在一起）。什么代码会强制排序器从第二个字符开始，从而忽略美元符号？

2) 另一列有动态下拉菜单（每个单元格中有 1 个 SELECT 标签），我希望它按每个 SELECT 标签内当前选定的值按字母顺序对列进行排序。有什么想法吗？

如果您至少能为我指明正确的方向，并让我了解如何在这两种情况下自定义排序，我将不胜感激。

提前致谢！！

Answer 1

这对我有用。如果未选择任何选项，可能需要一些调整...

$(document).ready(function(){
    // Sortable tables
    $('table').tablesorter ({
        cancelSelection: true,
        sortList: [[0,0]],
        textExtraction: function(node) {
            // Check if option selected is set
            if ($(node).find('option:selected').text() != "") {
                return $(node).find('option:selected').text();
            }
            // Otherwise return text
            else return $(node).text();
        }
    });
});

该库在较新版本中使用缓存。对下拉列表的更新需要刷新表排序器的缓存。如果缓存未刷新，则该列将按下拉列表的原始选择而不是当前选择进行排序。

// hook into the select element's onchange event
$("td > select").change(function() {
        const config = $("table")[0].config;
        //refresh the cache so the newly selected element is used to sort with
        $.tablesorter.updateCache(config);
});

Answer 2

2）另一栏有动态
下拉菜单（每个下拉菜单中有 1 个 SELECT 标签
细胞），我希望它
按字母顺序对列进行排序
每个中当前选择的值
选择标签。有什么想法吗？

我只是想实现这一目标，但不可能以简单的方式实现。解析器函数作为参数获取的字符串 (..format: function(s) {..) 已从标签中剥离。因此无法确定选择哪个值。为此，必须修改表排序器。

我现在所做的是在前面添加一个隐藏选项，其中包含所选值。这是一个解决方法。但就像这样，甚至不需要编写自己的解析器和表排序器即可正确排序。

<option style="display:none">B</option>
<option value="A">A</option>
<option value="B" selected="selected">B</option>
<option value="C">C</option>
...
<option style="display:none">A</option>
<option value="A"  selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>

tablesorter 现在排序的字符串是：

• BABC
• AABC

Answer 3

如果它可以帮助将来尝试这样做的人，我找到了一个解决方案：

2) Another column has dynamic drop-downs (1 SELECT tag in each cell), and I would like it to
alphabetically sort the column by the currently selected values inside each SELECT tag. Any ideas?

使用 tablesorter 的分支作者：Mottie。它允许在列级别自定义文本提取功能（请参阅 Mottie 的文档）。对于我想要排序的列（在本例中是第一个列，因此索引为 0），我初始化为：

textExtraction: {
    0: function(node) {
        return $(node).find('option:selected').text();
    }
}

遗憾的是，我看不到一种优雅的方法来让它与原始数据一起工作。

Answer 4

对于非标准数据（除了简单文本或数字之外的任何数据），您必须编写一个解析器并通过其 API 添加它。请参见此处：http://tablesorter.com/docs/example-parsers.html

我必须对具有数值（百分比）和图像的表格单元格执行此操作你可以尝试这个简单的。 “$1.58”将排序在数字 1.58 处

// add parser through the tablesorter addParser method 
$.tablesorter.addParser({ 
    // set a unique id 
    id: 'money', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // format your data for normalization 
        var str = s.replace('
, '').replace(',','') ;
        return parseFloat(str);
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
});