不要打印包含数据表的所有列



我有以下代码来生成表:

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

由于我有代码,前两列是隐藏的,但当我使用数据表打印时,这两列会出现。

我希望这些列不会自动出现在打印中,而无需用户操作。除了这两个之外,它还打算隐藏前两个可见列以防打印,也可以自动隐藏。

你能帮忙吗?

您可以使用columns选项,它是按钮exportData()功能的一部分。

有多种方法可以使用它,但有一种方法是将其添加为每个按钮的exportOptions选项。例如:

buttons: [
{
extend: 'excel',
text: 'excel',
title: 'Registo de Marcações',
exportOptions: {
columns: <columns-selector-goes-here>
}    
},
...
]

对于列选择器,您可以提供相当广泛的不同格式。

一个简单的数组包含每个列的索引:

columns: [4,5,6,7,8]

如果您想将列选择器定义为";除了前4列之外的所有列";(索引0到3(,您可以使用一个函数:

exportOptions: {
columns: function ( idx, data, node ) {
if (idx >= 4) {
return data;
}
}
}    

您还可以试用column-selector所接受的所有其他格式。


您需要将exportOptions选项添加到每个不同的按钮-Excel、PDF、打印。但是,您也可以通过将column-selector定义为一个变量来稍微简化事情,而不是为每个按钮显式地重复它。

最新更新