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

时间:2011-05-05 22:06:56

标签: javascript jquery sorting tablesorter

我正在使用神奇的jQuery TableSorter插件自动将排序功能添加到表的列中(只需单击每个列的标题)。除了其中几个列之外,所有列都能完美运行。

1)其中一个列的单元格在前面包含美元符号(例如:$ 20,$ 10,$ 5)。分拣不正常;它按字母顺序排序(因为所有单元格内容都以$开头,所以它们都被错误地捆绑在一起)。什么代码会迫使分拣机从第二个角色开始,从而忽略美元符号?

2)另一列有动态下拉列表(每个单元格中有1个SELECT标记),我希望按照字母顺序对每列SELECT标记内当前选定的值进行排序。有什么想法吗?

如果你至少可以指出我正确的方向并让我知道如何在两种场景中自定义排序,我将不胜感激。

提前致谢!!

4 个答案:

答案 0 :(得分:7)

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

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

答案 1 :(得分:3)

  

2)另一栏有动态   下拉菜单(每个中有1个SELECT标签)   细胞),我想它   按字母顺序对列进行排序   当前在每个内部选择的值   SELECT标签。有什么想法吗?

我只是试图实现这一目标,而且不可能以直截了当的方式实现。解析器函数作为参数获取的字符串(.. format:function(s){..)已从标记中删除。因此无法确定选择了哪个值。为此,必须修改tablesorter。

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

<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

答案 2 :(得分: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?

fork of tablesorter使用Mottie。它允许在列级别自定义文本提取功能(请参阅Mottie's documentation)。对于我想要排序的列(在这种情况下是第一个,因此是0索引),我初始化为:

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

我无法看到一种优雅的方式让它与原版一起工作,遗憾的是。

答案 3 :(得分:1)

对于非标准数据(除了简单文本或数字之外的任何内容,您必须编写解析器并通过其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' 
});