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

我的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>

{%如果提交['ratio']>=0.75%}
肯定的
{%elif提交['ratio']>=0.5%}
中立的
{%else%}
消极的
{%endif%}

有什么东西我可以像一个自定义标签一样粘贴在span中进行排序，而文档对此不是很清楚

即

阳性

您不应该在服务器端转换浮点值，您可以将它们显示为“负中性正”用户端，同时保留初始数据以供处理（订购）

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

$('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>`
        }
    ]
});

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

$（'table'）.DataTable({
dom：‘t’，
columnDefs：[{
目标：0，
createdCell：（td，data）=>td.outerHTML=`${data<0.5？'Negative'：data>0.75？'Negative'：'Neutral'}`，
类型：“negneutpos”
}]
});
Object.assign（$.fn.DataTable.ext.oSort{
“negneutpos desc”：（a，b）=>b-a，
“negneutpos asc”：（a，b）=>a-b，
});

比率
项目
0.2苹果
0.5Banana
0.8梨
0.4橙色
您不应该在服务器端转换浮点值，您可以将它们显示为“负中性正”用户端，同时保留初始数据以供处理（订购）

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

$('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>`
        }
    ]
});

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


$（'table'）.DataTable({
dom：‘t’，
columnDefs：[{
目标：0，
createdCell：（td，data）=>td.outerHTML=`${data<0.5？'Negative'：data>0.75？'Negative'：'Neutral'}`，
类型：“negneutpos”
}]
});
Object.assign（$.fn.DataTable.ext.oSort{
“negneutpos desc”：（a，b）=>b-a，
“negneutpos asc”：（a，b）=>a-b，
});

比率
项目
0.2苹果
0.5Banana
0.8梨
0.4橙色

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