我使用自定义函数在 DataTable 列中呈现 HTML 图标,而不是显示纯文本:
{data: {newCost : "newCost", oldCost:"oldCost"},
title: "Difference",
render: {"display":function(data) {
if (parseFloat(data.newCost) > parseFloat(data.oldCost)) {
return '<i class="fas fa-arrow-up icon-red" data-sort="1" style="margin-left: 4px"></i>'
}
if (parseFloat(data.newCost) === parseFloat(data.oldCost)) {
return '<i class="fas fa-equals" data-sort="0" style="margin-left: 4px"></i>'
} else {
return '<i class="fas fa-arrow-down icon-green" data-sort="-1" style="margin-left: 4px"></i>'
}
}, "sort": function(data){
return data.newCost - data.oldCost;
}, "_":function(data){
return data.newCost - data.oldCost;
}
}
},
如您所见,鉴于 oldCost
和 newCost
两个值之间的差异,我使用 render
函数来显示箭头。但是当我使用导出按钮插件导出它时,该列显示一个空白区域。我想显示差异的纯文本值。
这可能吗?
最佳答案
您可以将差异存储为属性:
render: {"display":function(data) {
var difference = data.newCost - data.oldCost;
if (parseFloat(data.newCost) > parseFloat(data.oldCost)) {
return '<i data-value="'+difference+'" class="fas fa-arrow-up icon-red" data-sort="1" style="margin-left: 4px"></i>'
}
...
在导出选项中返回该属性值:
{
extend: 'csvHtml5',
exportOptions: {
format: {
body: function(data, row, column, node) {
if (column == 42) { //dont know the index
return $(data).attr('data-value')
}
}
}
}
}
澄清一下:出现空格是因为 <i>
的文本值元素是''
。
关于jquery - DataTables 中导出 CSV 的自定义值 (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52669303/