如何在Bootstrap3 DataTable中按列派生值实现排序

我在Bootstrap项目中使用DataTable，目前运行状态良好。当前配置里，Amounts列被设置为不可排序，但该列由多个数值组合而成，我需要让这一列按这些数值的总和排序，且无需显示总和值。

示例行结构：

<tr>
    <td>col1</td>
    <td>
      thing1: 100,
      thing2: 100,
      thing3: 200
      <div style="visibility: hidden;">sum: 400</div>
    </td>
</tr>
<tr>
    <td>col1</td>
    <td>
      thing1: 100,
      thing2: 1000
      <div style="visibility: hidden;">sum: 1100</div>
    </td>
</tr>

希望保留列的标准排序按钮，让该列按每行隐藏的总和值排序。以下是最终可行的单元格结构及JS配置：

最终单元格内容 #

<td style = "white-space: nowrap;">
 <div style="visibility: hidden;">5898748</div>
 debt-amt_incur: $38,001.00<br/>
 debt-amt_paid: $4,824.00<br/>
 expn-amount: $271,681.00<br/>
 rcpt-amount: $234,479.00<br/>
 smry-amount_a: $3,662,227.00<br/>
 smry-amount_b: $1,362,306.00<br/>
 splt-elec_amount: $325,230.00<br/>
</td>

最终JS配置 #

{"name": "Amounts",
  "render": function(data, type, row, meta) {
     if (type === 'display' || type === 'filter') {
     return data;
   }
   else { // type is 'sort' in this case:
     return Number($.parseHTML(data)[0].innerHTML);
   }
  }
 },

使用的库版本 #

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

内容的提问来源于stack exchange，提问作者Ray Kiddy