javascript - jQuery Table sorter float 距离排序

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 demo

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'
    }
  }
});​