1
I have a datatable with original data and details data, this detail data can be expanded as desired by the user, but I have a printing problem, when I use the function print datatable, only the original data is printed, the detail data does not show. I am working for the first time with jquery datatable, and found this problem in some similar cases, many with no answers and others stating that it is not possible.
I would like to know whether or not it is possible to print out details. If it is not possible what is the best way to show a detail in the same table so that it can be printed?
$scope.loadTable = function () {
$("#preloader").removeClass("ng-hide");
$("#btnConsultar").attr("disabled", true);
//Remover o manipulador de eventos de clique mais recente, adicionando .off antes de adicionar o novo
$('#tableDocumentos tbody').off('click', 'td.details-control');
$scope.filtroExtrato.codigoSistemaUsuarios = $scope.user.codigoUsuario;
$http({
method: 'PUT',
url: '/sc/getExtrato',
data: $scope.filtroExtrato
}).then(function (response) {
console.log(response.data);
var table = $('#tableDocumentos').DataTable({
aaData: response.data,
language: {
url: "//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json",
decimal: ",",
thousands: "."
},
deferRender: true,
bAutoWidth: false,
bProcessing: true,
bDeferRender: true,
columnDefs: [{
targets: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
visible: false
}],
dom: 'Bfrtip',
buttons: [
{
extends: "text",
text: "Expandir/Recolher",
buttonClass: "btn btn-warning",
action: function (button, config) {
$('#tableDocumentos tbody td:first-child').trigger('click');
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
}
],
sAjaxDataProp: "",
bDestroy: true,
order: [[2, "asc"]],
columns: [
/*{
data: "documentoCodigo",
className: "dt-body-center",
orderable: false
},*/
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{
data: "pessoaCnpj", width: "13%"
},
{
data: "documentoDataEmissao", type: "date", width: "8%", render: function (data) {
if (data !== null) {
var javascriptDate = new Date(data);
var day = javascriptDate.getDate().toString();
day = ('00' + day).substring(day.length);
var month = (javascriptDate.getMonth() + 1).toString();
month = ('00' + month).substring(month.length);
var year = javascriptDate.getFullYear().toString();
javascriptDate = day + "/" + month + "/" + year;
return javascriptDate;
} else {
return "";
}
}
},
{
data: "documentoDigitado", width: "12%"
},
{
data: "documentoTipo", width: "10%"
},
{
data: "documentoValorLiquido",
"type": "decimal",
"render": $.fn.dataTable.render.number('.', ',', 2),
width: "8%",
orderable: false
},
{
data: "documentoValorBaixado",
type: "decimal",
render: $.fn.dataTable.render.number('.', ',', 2),
width: "8%",
orderable: false
},
{
data: "documentoValorSaldo",
type: "decimal",
render: $.fn.dataTable.render.number('.', ',', 2),
width: "8%",
orderable: false
},
{
data: "documentoTotalParcelas", width: "8%"
},
{
data: "documentoSituacao", width: "8%"
},
{
data: "filialNome", width: "15%"
},
{
data: "documentoHistorico", width: "15%"
},
],
});
//Define quais as colunas serão visiveis para o usuário conforme o filtro
if ($scope.filtroExtrato.colunasDataTable.length > 0) {
for (var i = 0; $scope.filtroExtrato.colunasDataTable.length > i; i++) {
table.column($scope.filtroExtrato.colunasDataTable[i]).visible(true);
}
}
$('#tableDocumentos tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(tableParcelas(row.data())).show();
tr.addClass('shown');
}
});
$("#preloader").addClass("ng-hide");
$("#btnConsultar").attr("disabled", false);
}, function (response) {
console.log(response.data);
$("#preloader").addClass("ng-hide");
$("#btnConsultar").attr("disabled", false);
});
};
function tableParcelas(d) {
var tableParcelas = $('#tableParcelas_' + d.codigoFinanceirofndocumentos.toString()).DataTable({
aaData: JSON.stringify(d.listaParcelas),
language: {
url: "//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json",
decimal: ",",
thousands: "."
},
bPaginate: false,
info: false,
paging: false,
searching: false,
bAutoWidth: false,
bProcessing: true,
bDeferRender: true,
sAjaxDataProp: "",
bDestroy: true,
order: [[3, "asc"]],
columns: [
{data: "parcelaDocumentoDigitado", width: "8%"},
{data: "parcelaTipoParcela", width: "13%"},
{data: "parcelaAp", width: "13%"},
{
data: "parcelaDataVencimento", type: "date", width: "8%", render: function (data) {
if (data !== null) {
var javascriptDate = new Date(data);
var day = javascriptDate.getDate().toString();
day = ('00' + day).substring(day.length);
var month = (javascriptDate.getMonth() + 1).toString();
month = ('00' + month).substring(month.length);
var year = javascriptDate.getFullYear().toString();
javascriptDate = day + "/" + month + "/" + year;
return javascriptDate;
} else {
return "";
}
}
},
{
data: "parcelaValorTotal",
"type": "decimal",
"render": $.fn.dataTable.render.number('.', ',', 2),
width: "8%",
orderable: false
},
{
data: "parcelaValorBaixado",
type: "decimal",
render: $.fn.dataTable.render.number('.', ',', 2),
width: "8%",
orderable: false
},
{
data: "parcelaSaldo",
type: "decimal",
render: $.fn.dataTable.render.number('.', ',', 2),
width: "8%",
orderable: false
},
{data: "parcelaSituacao", width: "10%"}
]
});
// `d` is the original data object for the row
var html = '<div class="col-xs-12 mb25">' +
'<div class="no-more-tables "> ' +
'<table id="tableParcelas_' + d.codigoFinanceirofndocumentos.toString() + '" cellspacing="0" width="100%" ' +
'class="table table-striped table-condensed datatable table-striped mb0"> ' +
'<thead> ' +
'<tr style="background: #3276B1; color: #ffffff"> ' +
'<th>Parcela</th> ' +
'<th>Tipo Parcela</th> ' +
'<th>AP</th> ' +
'<th>Vencimento</th> ' +
'<th>Total</th> ' +
'<th>Baixado</th> ' +
'<th>Saldo</th> ' +
'<th>Situação</th> ' +
'</tr> ' +
'</thead> ' +
'</table> ' +
'</div> ' +
'</div>';
return html;
}