DataTables (jQuery) 中导出 CSV 的自定义值答案

【问题标题】：Custom value for export CSV in DataTables (jQuery)DataTables (jQuery) 中导出 CSV 的自定义值
【发布时间】：2019-03-11 04:17:33
【问题描述】：

我正在使用自定义函数在 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 函数来显示一个箭头。但是当我使用导出按钮插件导出它时，列显示一个空格。我想显示差异的纯文本值。

这可能吗？

【问题讨论】：

标签： jquery datatables render

【解决方案1】：

您可以将差异存储为属性：

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> 元素的文本值为''。

【讨论】：