Tablesorter 2.0插件和表與嵌套的HTML

Question

我使用https://mottie.github.io/tablesorter/docs/index.html的Tablesorter插件，我在MVC Razor視圖中具有下表。

@foreach (var item in Model.Products) 
{ 
    decimal? vatValue = (item.UnitPrice * item.Quantity) * 0.2M; 
    decimal? goodsValue = (item.UnitPrice * item.Quantity); 
    <tr> 
     <td class="product-title" data-thumbnail="/_includes/img/uploads/product-thumb.jpg"><span>@item.ProductName</span> 
     </td> 
     <td class="product-id"> 
      <span class="hl">Product code: </span> 
      @item.ProductCode 
     </td> 
     <td class="price">&pound;@item.UnitPrice 
      <small class="hl">unit price</small> 
     </td> 
     <td class="units"> 
      <input type="number" class="choose-quantity" placeholder="0" value="@item.Quantity" min="0" readonly="readonly"> 
     </td> 
     <td class="vat"> 
      <small class="hl">VAT:</small> 
      &pound;@(vatValue) 
     </td> 
     <td class="goods-value"> 
      <small class="hl">Goods value:</small> 
      &pound;@(goodsValue) 
     </td> 
    </tr> 
} 

VAT欄和Goods value欄沒有數字。我明白爲什麼這樣做，因爲我們有一個嵌套的標籤內部正在排序，插件可能將HTML解釋爲字符串的一部分，因此不能按數字排序。

無論如何我可以解決這個問題嗎？我可以在此表上設置任何配置設置，使其只能查找數字？

謝謝！

Answer 1

這可能是最簡單的，如果值被包裹在一個跨度：

<tr> 
    <td class="product-title" data-thumbnail="/_includes/img/uploads/product-thumb.jpg"> 
     <span>@item.ProductName</span> 
    </td> 
    <td class="product-id"> 
     <span class="hl">Product code: </span> 
     @item.ProductCode 
    </td> 
    <td class="price"> 
     <span>&pound;@item.UnitPrice</span> 
     <small class="hl">unit price</small> 
    </td> 
    <td class="units"> 
     <input type="number" class="choose-quantity" placeholder="0" value="@item.Quantity" min="0" readonly="readonly"> 
    </td> 
    <td class="vat"> 
     <small class="hl">VAT:</small> 
     <span>&pound;@(vatValue)</span> 
    </td> 
    <td class="goods-value"> 
     <small class="hl">Goods value:</small> 
     <span>&pound;@(goodsValue)</span> 
    </td> 
</tr> 

然後你可以使用textExtraction function爲目標的跨度&提取出相關的信息（demo）：

$(function() { 
    $('table').tablesorter({ 
     theme: 'blue', 
     textExtraction: { 
      // header class names 
      '.price, .vat, .goods-value' : function (node) { 
       return $(node).find('span').text(); 
      } 
     }, 
     widgets: ['zebra', 'columns'] 
    }); 
}); 

*注意*用於定位列的類名稱必須與thead中的單元格的類名稱匹配，而不是tbody中的單元格。