2

A pagina tem um datatables https://datatables.net/, gostaria de ocultar os itens que é criados por ele na hora da impressão, exemplo: campo de pesquisa, paginação etc.

Meu datatable está dessa forma:

<script>
    $(document).ready(function () {
        $('#minhaTabela').DataTable({
            "language": {
                "lengthMenu": "Mostrando _MENU_ registros por página",
                "zeroRecords": "Nada encontrado",
                "info": "Mostrando página _PAGE_ de _PAGES_",
                "infoEmpty": "Nenhum registro disponível",
                "infoFiltered": "(filtrado de _MAX_ registros no total)",



                "sEmptyTable": "Nenhum registro encontrado",
                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ resultados por página",
                "sLoadingRecords": "Carregando...",
                "sProcessing": "Processando...",
                "sZeroRecords": "Nenhum registro encontrado",
                "sSearch": "Pesquisar",
                "oPaginate": {
                    "sNext": "Próximo",
                    "sPrevious": "Anterior",
                    "sFirst": "Primeiro",
                    "sLast": "Último"
                },
                "oAria": {
                    "sSortAscending": ": Ordenar colunas de forma ascendente",
                    "sSortDescending": ": Ordenar colunas de forma descendente"
                }

            }
        });
    });


</script>

Para fazer a impressão estou usando o print do css e coloquei dessa forma para ocultar mais não funcionou.

  .lengthMenu,
    .zeroRecords,
    .info,
    .infoEmpty,
    .infoFiltered,
    .sEmptyTable,
    .sInfo,
    .sInfoEmpty,
    .sInfoFiltered,
    .sInfoPostFix,
    .sInfoThousands,
    .sLengthMenu,
    .sLoadingRecords,
    .sProcessing,
    .sZeroRecords,
    .sSearch,
    .oPaginate,
    .oAria {
        display: none;
    }

Gostaria de ocultar também o nome da janela e o rodapé que a função pega do navegador.

2
  • Cara no seu css o nome da classe tem que ter um ponto antes, o nome da classe começa com um . ! tipo .nome { css }
    – hugocsl
    19/11/2018 às 17:04
  • @hugocsl Então, esqueci desse detalhe na hora de publicar aqui rsrs, mas infelizmente ainda não é isso.
    – mba
    19/11/2018 às 17:28

1 Resposta 1

0

Cara o rodapé e o link acho que vc não consegue apagar, pq é da configuração da impressora acho que vc não consegue mudar isso com CSS

inserir a descrição da imagem aqui

Configuração que o usuário faz

inserir a descrição da imagem aqui


Mas vc pode fazer uma gambiarra que vai "encobrir" as informações que vc não quer. Basta vc mudar os valores default das margens de impressão, para isso use essa regra:

  @page {
    size: A4;  
    margin: 15pt 0pt 25pt;
  }

Esse é o print que consegui com esse css acima:

OBS: Não funciona caso o conteúdo não ocupe a página inteira, pois ele não vai "encobrir" o rodapé. Porém se o seu container estiver com display flex vc pode criar uma div vazia no final de tudo com flex:1 assim ela vai cobrir o espaço restante do container cobrindo o rodapé.

Sem a div com flex:1 no final inserir a descrição da imagem aqui

Com a div vazia com flex:1 no final inserir a descrição da imagem aqui


Sobre remover outros elemento no print

Mas sobre os campos que quer remover na impressão, no seu css inclua isso:

@media only print {
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate paging_simple_numbers {
        display: none !important;
    }
}

A impressão da tabela deve ficar como na imagem abaixo retirada direito do site que vc citou na pergunta:

inserir a descrição da imagem aqui

9
  • 1
    coloquei dessa forma no meu print css, mas não funcionou. Mas acho que já sei o que pode ter acontecido, fiz a tradução do itens e inserir dentro da função, acredito que os nomes estão diferente, vou verificar e já te dou um retorno. Mas desde já agradeço por me ajudar.
    – mba
    19/11/2018 às 16:42
  • 1
    Editei minha pergunta, colocando o código como estou usando, devo esta esquecendo alguma coisa. Não tem base..rsrs
    – mba
    19/11/2018 às 17:03
  • 1
    @mba vai no Chrome clica com o btn direito do mous no elemento que quer excluir e selecione no menu que vai abrir Inspecionar, ou Inspect, o DevToos vai abrir mostrando o elemento que vc clicou. Veja qual é o nome da classe dele ou se ele tem um ID. Cope e cole essa .classe ou #id no seu css dentro da regra @media only print { .classe {display: none !important;} #id{display: none !important;} }
    – hugocsl
    19/11/2018 às 17:39
  • 1
    valeu pela dica, os nomes estava bem parecido como você tinha mencionado antes, olha para vc ver: .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { display: none !important; } Por causa do ` .dataTables_wrapper` que não estava funcionando. Vou tentar a dica rodapé. Obrigado
    – mba
    19/11/2018 às 18:07
  • 1
    Então, graças a sua ajuda. Valeu mano. Abraços.
    – mba
    19/11/2018 às 18:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .