jQuery tablesorter - 不对具有格式化货币值的列进行排序

时间:2012-01-27 00:19:43

标签: jquery tablesorter

jQuery 1.7.1& tablesorter插件 - 我有一个货币栏,有千位分隔符和价值,如$ 52.00 $ 26.70 $ 100.00 $ 50.00 $ 1,002.00 $ 1,102.00。当我尝试按以下方式对排序进行排序时,

   $1,002.00  
   $1,102.00
   $26.70
   $50.00
   $52.00
   $100.00

需要像

这样的值
   $26.70
   $50.00
   $52.00
   $100.00
   $1,002.00  
   $1,102.00

尝试了很多解决方案,但没有成功。

4 个答案:

答案 0 :(得分:31)

Tablesorter允许您为此类内容定义“custom parsers”。

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

$(function() {
    $("table").tablesorter({
        headers: {
            6: {//zero-based column index
                sorter:'thousands'
            }
        }
    });
});

您可能需要调整格式函数,我还没有测试过。

答案 1 :(得分:24)

如果您只想修复货币编号(最快):

<script type="text/javascript">
    $("table").tablesorter({
        textExtraction: function(node){ 
            // for numbers formattted like €1.000,50 e.g. Italian
            // return $(node).text().replace(/[.$£€]/g,'').replace(/,/g,'.');

            // for numbers formattted like $1,000.50 e.g. English
            return $(node).text().replace(/[,$£€]/g,'');
         }
    })
</script>

<td><span>£80,000.00</span></td>

我不喜欢StackOverflow上的其他3个其他提议的解决方案:

  1. '使用自定义解析器并在表中应用排序init' - 对于批量表不可重复使用
  2. '使用自定义解析器并应用表格单元格的类' - 脏标记
  3. '在源中修复TableSorters货币排序' - 为将来的升级而烦恼

答案 2 :(得分:15)

如果要修复所有数据类型(最灵活):

<script type="text/javascript">
    $(function() {
        $("table").tablesorter({
            textExtraction: function(node){ 
                var cell_value = $(node).text();
                var sort_value = $(node).data('value');
                return (sort_value != undefined) ? sort_value : cell_value;
            }
        })
    })
</script>

<td data-value="2008-04-01">01 Apr 2008</td>
<td>Alice</td>
<td data-value="80.00"><span>£80.00</span></td>

这样做的好处是可以将显示数据与排序数据分开,更具可重用性。

答案 3 :(得分:0)

Following the same idea proposed by @Ownen, since TableSorter v2.16.0, you can use the data-text attribute directly, without the need to declare your own textExtraction function (more info here):

<td data-text="2008-04-01">01 Apr 2008</td>
<td>Alice</td>
<td data-text="80.00"><span>£80.00</span></td>

This attribute work with other widgets too, like math.

Note: in order to make it work with the output widget, you need to declare the output_dataAttrib option:

$('#table').tablesorter({
    widgets: ["output"],
    widgetOptions : {
       output_dataAttrib: 'data-text'
    }
});