0
私はオリジナルデータと詳細データでデータテーブルを持っていますが、この詳細データはユーザの希望に応じて拡張できますが、私は印刷問題があります。データテーブルprintを使用すると、詳細データは表示されません。私はjquery datatableで初めて作業していますが、いくつかの同様のケースでは、この問題に遭遇しました。答えがないものが多く、他のものはpossibleではありません。jQuery DataTable印刷の詳細
詳細を印刷するかどうかは不思議です。同じテーブルに詳細を表示して印刷することができない場合はどうすればいいですか？
$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;
}
印刷する詳細を指定できますか？ –