jQuery Datatable Print Details

Asked

Viewed 686 times

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;

        }

1 answer

1


I managed to solve my problem by following this solution, where it indicates how to make so that always be printed the detail.

I simply copied and understood the whole process. Apparently I didn’t need to change anything.

I hope you help someone!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.