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

Using jQuery TableSorter to Sort Columns Containing Drop-down (SELECT) Tags and Dollar Signs ($)

本文关键字：符号 美元 排序 TableSorter jQuery 包含下 使用 SELECT      更新时间：2023-09-26

我正在使用神话般的jQuery TableSorter插件自动将排序功能添加到表的列中（只需单击每列的标题）。这适用于所有列，除了其中几列。

1）列的一个单元格前面包含美元符号（例如：$ 20，$ 10，$ 5）。排序无法正常工作;它按字母顺序排序（由于所有单元格内容都以 $ 开头，因此它们都被错误地捆绑在一起）。什么代码会强制分拣机从第二个字符开始，从而忽略美元符号？

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

如果您至少能为我指出正确的方向，并告诉我如何在两种情况下自定义排序的想法，我将不胜感激。

提前感谢！！

这对

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

$(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);
});

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

我只是试图实现这一目标，但这是不可能的。解析器函数作为参数获取的字符串 （..格式：函数 {..） 已从标签中剥离。因此，无法确定选择了哪个值。为此，必须修改表排序器。

我现在所做的是预先添加一个隐藏选项，其中包含选定的值。这是一种解决方法。但是像这样，甚至没有必要编写自己的解析器和表排序器正确排序。

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

表排序器现在排序的字符串是：

  • 巴布克
  • 亚伯克

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

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?

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

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

可悲的是，我看不到一种优雅的方式来让它与原版一起工作。

对于非标准数据（除了简单的文本或数字以外的任何数据），您必须编写一个解析器并通过其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' 
});
相关文章：