如何使用备用值对 JavaScript 数据表进行排序？

Ari 发表于 Dev

阿里

我的 DataTable 中有一个列，它的值 (int) 更改 (str) 取决于它的值。它的初始值为 0 - 1，并根据其值将其更改为负值、正值或中性值以提供该值的上下文。

在这样做之前，我的桌子看起来像这样

Ratio     Item
---------------
0.2       Apple
0.5       Banana
0.8       Pear
0.4       Orange

但是在使用 Jinja/Flask 进行一些 HTML 侧转换后，我的表格显示如下：

Ratio       Item
-----------------
Negative    Apple
Neutral     Banana
Positive    Pear
Negative    Orange

但我仍然想对仍然可以在 HTML 中访问的原始浮点值进行排序

我的 HTML 代码：

<td>
  {%if submission['ratio'] >= 0.75 %}
    <span>Positive</span>
  {% elif submission['ratio'] >= 0.5 %}
    <span>Neutral</span>
  {% else %}
    <span>Negative</span>
  {% endif %}
</td>

有没有什么我可以像自定义标签一样坚持在跨度中进行排序的东西，文档对此不太清楚。

<span data-sort="{{ submission['ratio'] }}">Positive</span>

叶夫根·戈尔邦科夫

您不应该翻译您的浮点值服务器端，您可以使它们显示为“负-中性-正”用户端，同时保持初始数据可用于处理（排序）。

为了使您的浮动显示为“负-中性-正”，您可能需要使用createdCell选项。要让该列仍可按原始浮点值排序，您可以为其分配自定义数据type，稍后将使用这些数据：

$('table').DataTable({
    ...
    columnDefs: [{
            targets: 0,
            type: 'negneutpos',
            createdCell: (td, data) => td.outerHTML = `<td data-sort="${data}">${data < 0.5 ? 'Negative' : data > 0.75 ? 'Positive' : 'Neutral'}</td>`
        }
    ]
});

然后，您可以为您的特定类型“negneutpos”实现自定义排序方法：

Object.assign($.fn.DataTable.ext.oSort, {
  'negneutpos-desc' : (a, b) => b - a,
  'negneutpos-asc' : (a, b) => a - b,
});

您可能会在下面找到完整的演示：

$('table').DataTable({
  dom: 't',
  columnDefs: [{
    targets: 0, 
    createdCell: (td, data) => td.outerHTML = `<td data-sort="${data}">${data < 0.5 ? 'Negative' : data > 0.75 ? 'Positive' : 'Neutral'}</td>`,
    type: 'negneutpos'  
  }]
});

Object.assign($.fn.DataTable.ext.oSort, {
  'negneutpos-desc' : (a, b) => b - a,
  'negneutpos-asc' : (a, b) => a - b,
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table>
	<thead>
		<tr>
			<th>Ratio</th>
			<th>Item</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>0.2</td><td>Apple</td>
		</tr>
		<tr>
			<td>0.5</td><td>Banana</td>
		</tr>
		<tr>
			<td>0.8</td><td>Pear</td>
		</tr>
		<tr>
			<td>0.4</td><td>Orange</td>
		</tr>
	</tbody>
</table>
</body>
</html>

ps请注意，data-sort在这种情况下，您甚至不需要额外的属性 ()

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。