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

时间:2018-10-05 15:49:57

标签: jquery datatables render

我正在使用自定义函数在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;
                }
            }
        },

enter image description here

如您所见,鉴于renderoldCost两个值之间的差异,我正在使用newCost函数来显示箭头。但是当我使用导出按钮插件导出它时,列显示空白。我想显示差异的纯文本值。

有可能吗?

1 个答案:

答案 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>,因此出现空白。