javascript - jQuery Table sorter 浮点距离排序

Question

我正在使用 tablesorter 对表格内容进行排序。我的表如下。

<table class="results" border="1">
<thead>
    <tr>
        <th class="header">No</th> 
        <th class="header">Distance</th>
        <th class="header">Diagnostic Fee</th>
        <th class="header">Regular Price </th>
        <th class="header">Company Price</th>
        <th class="">&nbsp;</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td>1</td>
        <td class="distance"><a>16.50 kms.</a></td>
        <td class="brand"><a>Credited</a></td>
        <td><a>$5</a></td>
        <td><a>$5<small>after 5% cash back</small></a></td>
    </tr>
    <tr>
           <td>2</td>
        <td class="distance"><a>6.30 kms.</a></td>
        <td class="brand"><a>Credited</a></td>
        <td><a>$8</a></td>
        <td><a>$8<small>after 5% cash back</small></a></td>
    </tr>
    <tr>
        <td>3</td> 
        <td class="distance"><a>10.25 kms.</a></td>
        <td class="brand"><a>Credited</a></td>
        <td><a>$2</a></td>
        <td><a>$2<small>after 5% cash back</small></a></td>
    </tr>
</tbody>
</table>​

我想使用距离和价格对表格进行排序。我面临的困难是解决距离表，因为距离以字母数字显示，如“12 公里”。因此，该表未排序。

谁能建议如何只用数字来解析内容？

这是jsfiddle 演示

Answer 1

Tablesorter 提供了一种为无法正确获取数据的单元格定义附加解析器的方法。您需要为您感兴趣的 2 列定义 2 个解析器。

所以你可能有：

$.tablesorter.addParser({
  id: 'distance',
  is: function(s) {
    return false;
  },
  format: function(text, table, cell) {
    return parseFloat(text.replace('kms.', ''));
  },
  type: 'numeric'
});

对于距离，并且：

$.tablesorter.addParser({
   id: 'price',
   is: function(s) {
     return false;
   },
   format: function(text, table, cell) {
     return parseFloat(text.replace('$', ''));
   },
   type: 'numeric'
 });

价格。然后你告诉 tablesorter 哪些列使用解析，所以：

$("table").tablesorter({
  debug:false,  
  sortList: [[0, 0], [2, 0]],
  headers: {
    1: {
      sorter: 'distance'
    },
    3: {
      sorter: 'price'
    }
  }
});​

Answer 2

Tablesorte 有一个选项“textExtraction”，因此您可以定义一个函数来在排序之前遍历文本。例子：

$("table").tablesorter({
        debug:false,  
        sortList: [[0, 0], [2, 0]],
        textExtraction: function(node) {  
            var $node = $(node)
            var text = $node.text();
            if ($node.hasClass('distance')) {
                text = text.replace('kms', '');
            };

            return text;
        }
});

更新的小提琴