javascript - Tablesorter 2.0 插件和带有嵌套 HTML 的表格

Question

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

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

增值税栏和商品值(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 中的单元格的类名称匹配。