I have the following table where I print with datatables.
var cars = [
{nome: "Teste", Discricao: "Teste1",},
{nome: "Teste2", Discricao: "Teste3",},
];
$(function () {
$('.cons-assid').on("click", function() {
$("#consultassid tbody").empty();
var linha = ``;
$('.consultassid > tbody > tr').remove();
var colab = [];
for (var i = 0; i < cars.length; i++) {
colab = cars[i].nome;
linha += `<tr">
<td class="text-center text-muted"> ${cars[i].nome}</td>
<td class="text-center text-muted"> ${cars[i].Discricao}</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: 'print',
text: 'print',
title: '<div style="text-align: left;">Colaborador: ' +colab+ '</div>',
exportOptions: {
columns: function ( idx, data, node ) {
if (idx >= 4) {
return data;
}
}
},
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">Colaborador</th>
<th class="text-center">Serviço</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</section>After returning the table, the search field of the datatables itself appears. So if you search for a name of a contributor, I want the title when printing to return the name of that contributor. The way I have it, the name of the last contributor returns in the title after running the for, and it should return the name I put in the search field.
Can you help to solve this problem?
You said "it should return the name I put in the search field".
If you want to print the text that the user entered into the search field, you need to use a function instead of a static string.
You are using this:
title: '<div style="text-align: left;">Colaborador: ' +colab+ '</div>',
Change it to this:
title: function () {
let colab = $( 'input.form-control' ).val();
return '<div style="text-align: left;">Colaborador: ' + colab + '</div>';
}
When you use a hard-coded string, that value is calculated when the web page first loads, and then it is never re-calculated. DataTables always uses the same value.
But if you use a function in your DataTable's title option, that function is re-executed every time you print the table.
You will probably want to enhance the above code, to deal with cases where the user does not type anything (empty string).
In your question you also say "I want the title when printing to return the name of that contributor". That is different from "the name I put in the search field". If you type teste3, then the printout will display Colaborador: Teste3 - which is not the name of that record's contributor (the name is Teste2).
So the question is not completely clear - but I think using the function is the answer you need.