对格式化的数字数据表值进行排序

时间：2018-10-20 19:09:33

标签： javascript jquery

我正在使用datatables创建表格。

在我的最小可行示例下面查找：

.replace()
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>

如您所见，当前订单显示错误。

我在格式化之前尝试过+-----------+---------------+ | 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 | +-----------+---------------+ ，但是我还是得到了错误的命令？

有人建议我在做什么错吗？

感谢您的答复！

2 个答案:

答案 0 :(得分：1)

在 render（）方法上，您可以使用 render（data，type）检查模式类型，并根据该模式类型，仅格式化数据显示模式并返回其他模式的原始数据。

在此处阅读文档： https://datatables.net/reference/option/columns.render

您可以看到您的示例如何进行此更改：

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>

答案 1 :(得分：1)

以上似乎是最好的答案，但是，如果您想快速测试一下，可以尝试通过删除

中获利的$来进行尝试。 

profit.split('$');
//this returns an array ['','x.xx']
parseFloat(parsed[1]).toFixed(2)

相关问题
最新问题