JQuery テーブルソーター プラグインを使用していますが、2 つの列の並べ替えに問題があります。ソースでは、列のフィールドに 0.00 が表示されています。これが、tablesorter が何もしていないように見える理由である可能性が最も高いです。ただし、これらの列フィールドは JavaScript 関数で計算されるため、画面を見ると実際にはこれらのフィールドに値が存在します。tablesorter でこれらの列をソートする方法についてのアイデアはありますか? 1 食あたりのコストとマージンの列は、以下で苦労している 2 つの列です。
<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);
}
ご協力いただきありがとうございます!!