对格式化的数字数据表值进行排序 [英] Sort numeric data.table values that are formatted
本文介绍了对格式化的数字数据表值进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用数据表来创建我的表.
I am using datatables to create my table.
在我的最小可行示例下面查找:
Find below my minimum viable example:
jQuery(document).ready(($) => {
function loadHardware() {
var results = {
"profRigHardware": [{
"title": "Product1",
"permalink": "http://test.com/computer-hardware/product1/",
"smallImg": "http://test.com/content/uploads/2018/07/product1.jpg",
"daily_netProfit": "165.99",
},
{
"title": "Product2",
"permalink": "http://test.com/computer-hardware/product2/",
"smallImg": "http://test.com/content/uploads/2018/07/product2.jpg",
"daily_netProfit": "161.99",
},
{
"title": "Product3",
"permalink": "http://test.com/computer-hardware/product3/",
"smallImg": "http://test.com/content/uploads/2018/07/product3.jpg",
"daily_netProfit": "-6.06",
},
{
"title": "Product4",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "-19.2",
},
{
"title": "Product5",
"permalink": "http://test.com/computer-hardware/product4/",
"smallImg": "http://test.com/content/uploads/2018/07/product4.jpg",
"daily_netProfit": "-116.06",
},
{
"title": "Product6",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "-0.06",
},
{
"title": "Product7",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "-18.24",
},
{
"title": "Product8",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "75.68",
},
{
"title": "Product9",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "863.31",
},
{
"title": "Product10",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "20.1",
}
]
};
const rentabilityHtml = function(daily_netProfit) {
if (daily_netProfit < 0) {
return `<div style="color:red;"><b>$${daily_netProfit}/day</b></div>`
} else {
return `<div style="color:green;"><b>$${daily_netProfit}/day</b></div>`
}
}
//transform data set
let dataSet = results.profRigHardware.map((item, i) => [
`<img src="${ item.smallImg }" alt="${ item.title }" height="42" width="42">
<a href="${item.permalink}" target="_blank">
${item.title}
</a>`,
parseFloat(item.daily_netProfit),
])
$('#allHardwareOverview').DataTable({
data: dataSet,
destroy: true,
iDisplayLength: 25,
responsive: true,
"bInfo": false,
"order": [
[1, 'desc']
],
columns: [{
title: "Model"
},
{
title: "Profitability",
render: function(profit) {
return rentabilityHtml(parseFloat(profit))
}
}
],
"initComplete": function(settings, json) {
$('#datatablediv').css('opacity', 1);
}
});
}
loadHardware();
});
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
<div class="table-responsive overflow-x:auto;">
<table id="allHardwareOverview" style="width:100%; float: left;" class="table table-bordered"></table>
</div>
</div>
我想通过以下方式对我的值进行排序:
I would like to order my values the following way:
+-----------+---------------+
| Model | Profitability |
+-----------+---------------+
| Product9 | $863.31/day |
+-----------+---------------+
| Product1 | $165.99/day |
+-----------+---------------+
| Product2 | $161.99/day |
+-----------+---------------+
| Product8 | $75.68/day |
+-----------+---------------+
| Product10 | $20.1/day |
+-----------+---------------+
| Product6 | $-0.06/day |
+-----------+---------------+
| Product3 | $-6.06/day |
+-----------+---------------+
| Product7 | $-18.24/day |
+-----------+---------------+
| Product4 | $-19.2/day |
+-----------+---------------+
| Product5 | $-116.06/day |
+-----------+---------------+
如您所见，当前订单显示错误.
As you can see the current order is wrongly shown.
我在格式化之前尝试过parseFloat(profit)，但是我还是得到了错误的顺序?
I tried to parseFloat(profit) before formatting it, however I still get the wrong order?
有人建议我在做什么错吗?
Any suggestions what I am doing wrong?
感谢您的答复！
推荐答案
在 render()方法上，您可以使用 render(data，type)检查模式类型. ，并根据这种模式类型，仅在显示模式下格式化数据，并为其他模式返回原始数据.
On the render() method you can check the mode type using render(data, type), and based on this mode type, just format the data only on display mode and return raw data for the other modes.
在此处阅读文档: https://datatables.net/reference/option/columns.render
您可以看到您的示例如何进行此更改:
You can see how your example works with this change:
jQuery(document).ready(($) => {
function loadHardware() {
var results = {
"profRigHardware": [{
"title": "Product1",
"permalink": "http://test.com/computer-hardware/product1/",
"smallImg": "http://test.com/content/uploads/2018/07/product1.jpg",
"daily_netProfit": "165.99",
},
{
"title": "Product2",
"permalink": "http://test.com/computer-hardware/product2/",
"smallImg": "http://test.com/content/uploads/2018/07/product2.jpg",
"daily_netProfit": "161.99",
},
{
"title": "Product3",
"permalink": "http://test.com/computer-hardware/product3/",
"smallImg": "http://test.com/content/uploads/2018/07/product3.jpg",
"daily_netProfit": "-6.06",
},
{
"title": "Product4",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "-19.2",
},
{
"title": "Product5",
"permalink": "http://test.com/computer-hardware/product4/",
"smallImg": "http://test.com/content/uploads/2018/07/product4.jpg",
"daily_netProfit": "-116.06",
},
{
"title": "Product6",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "-0.06",
},
{
"title": "Product7",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "-18.24",
},
{
"title": "Product8",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "75.68",
},
{
"title": "Product9",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "863.31",
},
{
"title": "Product10",
"permalink": "http://test.com/computer-hardware/product5/",
"smallImg": "http://test.com/content/uploads/2018/07/product5.jpg",
"daily_netProfit": "20.1",
}
]
};
const rentabilityHtml = function(daily_netProfit) {
if (daily_netProfit < 0) {
return `<div style="color:red;"><b>$${daily_netProfit}/day</b></div>`
} else {
return `<div style="color:green;"><b>$${daily_netProfit}/day</b></div>`
}
}
//transform data set
let dataSet = results.profRigHardware.map((item, i) => [
`<img src="${ item.smallImg }" alt="${ item.title }" height="42" width="42">
<a href="${item.permalink}" target="_blank">
${item.title}
</a>`,
parseFloat(item.daily_netProfit),
])
$('#allHardwareOverview').DataTable({
data: dataSet,
destroy: true,
iDisplayLength: 25,
responsive: true,
"bInfo": false,
"order": [
[1, 'desc']
],
columns: [{
title: "Model"
},
{
title: "Profitability",
render: function(profit, type) {
if (type == "display")
return rentabilityHtml(parseFloat(profit))
else
return profit;
}
}
],
"initComplete": function(settings, json) {
$('#datatablediv').css('opacity', 1);
}
});
}
loadHardware();
});
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
<div class="table-responsive overflow-x:auto;">
<table id="allHardwareOverview" style="width:100%; float: left;" class="table table-bordered"></table>
</div>
</div>
这篇关于对格式化的数字数据表值进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
