我正在使用自定义函数在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;
}
}
},
如您所见,鉴于render
和oldCost
两个值之间的差异,我正在使用newCost
函数来显示箭头。但是当我使用导出按钮插件导出它时,列显示空白。我想显示差异的纯文本值。
有可能吗?
答案 0 :(得分:1)
您可以将差异存储为属性:
restrict
在导出选项中返回该属性值:
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>
,因此出现空白。