CODEWITHSUNDEEP
javascriptjquerydatatables
Gerardo Merida
Gerardo Merida

Reputation: 28

hide div export datatable

I'm trying to export a data table but inside of it I have a tooltip. This is the data table with a progress bar and the tooltip inside the progress:

Tooltip Demo

The problem is when I export the Table to Excel it has the tooltip info. Like this: enter image description here

I just want it to show the 100%, for example. Here I have my php code

<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>

and this is my Javascript code to create the tooltip

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

So, all my progress bars have an info hidden div that have the data for the tooltip. but I don't want to export that tooltip data.

Any idea?

Upvotes: 1

Views: 2558

Answers (1)

saf21
saf21

Reputation: 844

I think you should try using datatables output format, below is the code example:

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'
      })
   ]
});

So, when you click export button, it will modified the data output based on your desired data.

Upvotes: 1

Related Questions