0

我正在使用 JQuery 表排序器插件，并且在对我的两列进行排序时遇到问题。在源代码中，字段中的列显示 0.00，这很可能是 tablesorter 似乎没有做任何事情的原因。但是，这些列字段是使用 javascript 函数计算的，因此在查看屏幕时这些字段中实际上存在值。关于如何让 tablesorter 对这些列进行排序的任何想法？每次服务的成本和利润率列是我在下面苦苦挣扎的两个：

<div id="plate_page_bottom">
    <table cellpadding="0" cellspacing="0" class="tablesorter">
        <thead>
            <tr>
                <th>Item #</th>
                <th>Description</th>
                <th>Brand</th>
                <th>Size</th>
                <th>Portion Per Case</th>
                <th>Case Cost</th>
                <th>Portions Per Serving</th>
                <th>Portion Size</th>
                <th>Cost Per Serving</th>
                <th>Usage %</th>
                <th>Margin</th>
            </tr>
        </thead>
        <tbody>
            @For Each item In Model.Items
                @<tr id="@item.ID">                          
                    <td>@item.ItemID</td>
                    <td>@item.Description</td>
                    <td>@item.Brand</td>
                    <td>@item.Size</td>
                    <td>@item.CasePortion</td>
                    <td>@item.Price</td>
                    <td>@item.ServingPortion</td>
                    <td>@item.PortionSize</td>
                    <td>$0.00</td>
                    <td>@item.Usage</td>
                    <td>0.00</td>
                </tr>
                index = index + 1
            Next
        </tbody>
    </table>
</div>


End Using
<script src="@Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.mb.parsers.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.formatCurrency-1.4.0.min.js")"></script>
<script type="text/javascript">
$(function () {
    $('.tablesorter').tablesorter({
        widgets: ['zebra'],
        widgetZebra: { css: ['alt-even-class', 'alt-odd-class'] }
    });

    calculateAll();

});

function calculateAll() {

    $.each($('.tablesorter tbody tr'), function (index, row) {
        calculateRow(row);
    });

    calculateSummary();

    $.each($('.tablesorter tbody tr'), function (index, row) {
        calculateMargin(row);
    });
}

function calculateRow(row) {
    var casePortion = $(row).find('td:nth(4)').html();
    var caseCost = $(row).find('td:nth(5)').html();
    var servingPortion = $(row).find('td:nth(6)').html();
    var usage = $(row).find('td:nth(9)').html();

    casePortion = (isNaN(casePortion) || casePortion.length <= 0) ? 0 : parseFloat(casePortion);
    caseCost = (isNaN(caseCost) || caseCost.length <= 0) ? 0 : parseFloat(caseCost);
    servingPortion = (isNaN(servingPortion) || servingPortion <= 0) ?  0 : parseFloat(servingPortion);
    usage = (isNaN(usage) || usage <= 0) ? 0 : parseFloat(usage);

    if (casePortion == 0 || caseCost == 0 || servingPortion == 0 || usage == 0) {
        $(row).find('td:nth(8)').html('$0.00');
        $(row).find('td:nth(10)').html('0.00');
    } else {
        var costServing = (caseCost / casePortion) * servingPortion * (usage / 100);
        $(row).find('td:nth(8)').html(costServing).formatCurrency();
    }
}

function calculateSummary() {
    var totalCost = 0;
    $.each($('.tablesorter tbody tr'), function (index, row) {
        totalCost = totalCost + parseFloat($(row).find('td:nth(8)').html().replace('$', ''));
    });
    $('#totalCost').html(totalCost).formatCurrency();

    var price = parseFloat($('#platePrice').html().replace('$', ''));
    if (isNaN(price) || price <= 0) {
        $('#foodPercent').html('0%');
        $('#plateProfit').html('$0.00');
    } else {
        var foodPercent = totalCost / price;
        $('#foodPercent').html(roundNumber(foodPercent, 2) + '%');
        var plateProfit = price - totalCost;
        $('#plateProfit').html(plateProfit).formatCurrency();
    }

}

function calculateMargin(row) {

    var costServing = $(row).find('td:nth(8)').html().replace('$', '');
    var totalCost = $('#totalCost').html().replace('$', '');

    costServing = (isNaN(costServing) || costServing.length <= 0) ? 0 : parseFloat(costServing);
    totalCost = (isNaN(totalCost) || totalCost.length <= 0) ? 0 : parseFloat(totalCost);

    if (costServing <= 0 || totalCost <= 0) {
        $(row).find('td:nth(10)').html('0.00');
    } else {
        var margin = ((costServing / totalCost) * 100);

        $(row).find('td:nth(10)').html(roundNumber(margin, 2) + '%');
    }
}

function roundNumber(num, dec) {
    var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
    return result.toFixed(dec);
}

谢谢你的帮助！！

4

0 回答 0