javascript - 隐藏div导出数据表

Question

我正在尝试导出数据表，但其中有一个工具提示。这是带有进度条和进度内的工具提示的数据表:

问题是当我将表导出到 Excel 时，它包含工具提示信息。像这样:

例如，我只想显示 100%。这是我的 php 代码

<td>
  <div class="progress">
    <div class='<?=barra($institucional); ?>' role="progressbar" style="width:<?=$institucional;?>%">
      <?=$institucional;?>%
    </div>
    <div class="info" style="display: none;">
      <strong>Acción:</strong> <?=round($row['accion']/3,2);?>%<br>
      <strong>Eje:</strong> <?=round($row['eje']/3,2);?>%<br>
      <strong>Programa:</strong> <?=round($row['programa']/3,2);?>%<br>
    </div> 
  </div>

这是我创建工具提示的 Javascript 代码

$( ".progress" ).each(function() {
    var contenido = $(this).children('.info:hidden').html()
    $( this ).popover({title: "", content: contenido, html: true, placement: "left", trigger:'hover', container: 'body'}); 
  });

所以，我所有的进度条都有一个信息隐藏 div，其中包含工具提示的数据。但我不想导出该工具提示数据。

有什么想法吗？

Answer 1

我认为你应该尝试使用 datatables output format ，下面是代码示例:

var buttonCommon = { exportOptions: {
                       format: {
                       body: function (data, row, column, node) {
                       // here you must get which column you want to change the data, it using number not column name, column number start from 0
                       return column === 5 ? 'your desired value' : data;
                    }
                }
            }
        };

$('#example').DataTable({
    ajax: "ajax_data.txt",
    columns: [
      { data: 'name' },
      { data: 'position' },
      { data: 'office' },
      { data: 'extn' },
      { data: 'start_date' },
      { data: 'salary' }
   ],
   dom: 'Bfrtip',
   buttons: [
      $.extend(true, {}, buttonCommon, {
        extend: 'csv'
      })
   ]
});

因此，当您单击“导出”按钮时，它将根据您想要的数据修改数据输出。