jQuery DataTable打印细节

时间:2017-07-13 23:46:03

标签: javascript jquery datatables

我有一个包含原始数据和详细数据的数据表,这个详细数据可以根据用户的意愿进行扩展,但是我有一个打印问题,当我使用数据表print函数时,只有原始数据是打印时,细节数据不显示。我第一次使用jquery数据表工作,我在一些类似的情况下遇到了这个问题,很多没有答案,有些人说它不是possible

我想知道是否可以打印细节。如果不可能最好在同一个表格中显示细节以便打印它?

$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 个答案:

答案 0 :(得分:0)

您的案例似乎可以通过此example来解决。

我遇到了同样的问题,这个例子对于解析原始表旁边的详细信息表的打印非常有用。

我希望它有所帮助