I have the following code to generate the table:
$(function () {
$('.cons-assid').on("click", function() {
$("#consultassid tbody").empty();
var linha = ``;
$('.consultassid > tbody > tr').remove();
linha += `<tr">
<td class="text-center text-muted" style="display:none;"> 08</td>
<td class="text-center text-muted" style="display:none;"> 09</td>
<td class="text-center text-muted"> Teste</td>
<td class="text-center text-muted"> Teste1</td>
<td class="text-center text-muted"> Teste2</td>
<td class="text-center text-muted"> Teste3</td>
<td class="text-center text-muted"> Teste4</td>
<td class="text-center text-muted"> Teste5</td>
<td class="text-center text-muted"> Teste6</td>
</tr>`;
$("#consultassid tbody").html(linha);
$('.consultassid').dataTable({
dom: 'Bflrtip',
"pagingType": "full_numbers",
"iDisplayLength": 10,
"oLanguage": {
"sProcessing": "Aguarde enquanto os dados são carregados ...",
"sLengthMenu": "Mostrar _MENU_ registos por página",
"sZeroRecords": "Nenhum registo correspondente ao criterio encontrado",
"sInfoEmpty": "Exibindo 0 a 0 de 0 registos",
"sInfo": "Exibindo de _START_ a _END_ de _TOTAL_ registos",
"sInfoFiltered": "",
"sSearch": "<span class='glyphicon glyphicon-search'></span>",
"oPaginate": {
"sFirst": "<i class='fa fa-fast-backward' aria-hidden='true'></i>",
"sPrevious": "<i class='fa fa-backward' aria-hidden='true'></i></span>",
"sNext": "<i class='fa fa-forward' aria-hidden='true'></i>",
"sLast": "<i class='fa fa-fast-forward' aria-hidden='true'></i>"
}
},
buttons: [
{
extend: 'excel',
text: 'excel',
title: 'Registo de Marcações',
},
{
extend: 'pdf',
text: 'pdf',
title: 'Registo de Marcações',
},
{
extend: 'print',
text: 'print',
title: 'Registo de Marcações',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '12pt' );
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
}
}
]
});
});
});
$(function() {
$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('element');
$(el).show();
$("section > div").not(el).hide();
});
});
$(function() {
$(".btn-hide").click(function(e) {
e.preventDefault();
el = $(this).data('element');
$(el).hide();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.colVis.min.js"></script>
<a href="s103" data-element="#minhaDiv103" class="btn-show cons-assid">
<i class="metismenu-icon pe-7s-wristwatch"></i>
Assiduidade
</a>
<section id="s103">
<div style="display:none" id="minhaDiv103">
<table class="align-middle mb-0 table table-borderless table-striped table-hover consultassid" id="consultassid">
<thead>
<tr>
<th class="text-center" style="display:none;">Mes</th>
<th class="text-center" style="display:none;">Dia</th>
<th class="text-center">Colaborador</th>
<th class="text-center">Serviço</th>
<th class="text-center">Data</th>
<th class="text-center">Entrada</th>
<th class="text-center">Saída</th>
<th class="text-center">Horas Diárias</th>
<th class="text-center">Acumulado Mensal</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</section>As I have the code, the first two columns are hidden, but when I print with datatables these two columns appear.
I wanted these columns not to appear in the print automatically, without user action. In addition to these two, it also intended to hide the first two visible columns from printing, also automatically.
Can you help?
You can use the columns option which is part of the Button's exportData() function.
There are various ways to use this, but one way is to add it as an exportOptions option for each button. For example:
buttons: [
{
extend: 'excel',
text: 'excel',
title: 'Registo de Marcações',
exportOptions: {
columns: <columns-selector-goes-here>
}
},
...
]
For the columns selector, there is a fairly wide range of different formats that you can provide.
A simple one is an array containing each column index:
columns: [4,5,6,7,8]
If you want to define the column selector as "everything except the first 4 columns" (indexes 0 through 3), you can use a function:
exportOptions: {
columns: function ( idx, data, node ) {
if (idx >= 4) {
return data;
}
}
}
You can also experiment with all the other formats accepted by the column-selector.
You need to add the exportOptions option to each different button - Excel, PDF, Print. But you can also simplify things slightly by defining the column-selector as a variable, instead of repeating it explicitly for each button.