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>
}

增值税栏和商品价值栏没有数字。我理解为什么会这样，这是因为我们在正在排序的标签内有一个嵌套标签，并且插件可能会将 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 中的单元格。