jQuery表格分类器浮动距离的排序

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使用parses的列,所以:

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