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

如果值包含在span中，则可能最简单：

<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来定位范围＆amp;提取相关信息（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中的单元格。

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

1 个答案: