How to disable a datatables at print time

Asked

Viewed 155 times

2

The page has a datatables https://datatables.net/, would like to hide the items that is created by it at the time of printing, example: search field, paging etc.

My datatable is like this:

<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>

To make the impression I am using the css print and put this way to hide more did not work.

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

I would also like to hide the name of the window and the footer that the function takes from the browser.

javascript css

  • Face in your css the class name has to have a point before, the class name starts with a . ! guy .nome { css }

  • @hugocsl So, I forgot this detail when publishing here rsrs, but unfortunately it is not yet that.

1 answer

0


Face the footer and the link I think you can not delete, because it is the printer configuration I think that you can’t change that with CSS

inserir a descrição da imagem aqui

Settings the user makes

inserir a descrição da imagem aqui

But you can make one gambiarra that will "cover up" the information you don’t want. Just vc change the default values of the print margins, for that use this rule:

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

This is the print I got with this css above:

OBS: It does not work if the content does not occupy the entire page, as it will not "cover up" the footer. However if your container be with display flex you can create a div empty at the end of everything with flex:1 so it will cover the remaining space of the container covering the footer.

Without to div with flex:1 in the end inserir a descrição da imagem aqui

With to div empty with flex:1 in the end inserir a descrição da imagem aqui

About removing other elements in print

But about the fields you want to remove in print, in your css include this:

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

The printing of the table should be as in the image below removed right from the site you quoted in the question:

inserir a descrição da imagem aqui

  • 1

    I put it that way in my css print, but it didn’t work. But I think I already know what might have happened, I translated the items and insert into the function, I believe the names are different, I’ll check and I’ll get back to you. But I thank you in advance for helping me.

  • @mba cara if you changed the name of the crappy classes to the names you replace there, or else use the ID if you have put some in these elements. I edited the answer with a solution that can serve you to solve the footer problem...

  • 1

    I edited my question, putting the code as I am using, I must be forgetting something. No basis.. rsrs

  • @mba vc saw the comment I made up there after you edited it? You have to put a . before the class name in css. TB edited my reply with several details on how to hide the original footer by changing print margins...

  • I did, but unfortunately that’s not it yet.

  • 1

    @mba will in Chrome click with the right btn of the Mous on the element you want to delete and select in the menu that will open Inspect, or Inspect, the Devtoos will open showing the element you clicked. See what his class name is or if he has an ID. Cope and paste that . class or #id into your css within the rule @media only print { .classe {display: none !important;} #id{display: none !important;} }

  • 1

    thanks for the tip, the names were very similar as you had mentioned before, look at you see: .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {&#xA; display: none !important;&#xA; } Because of the .dataTables_wrapper that wasn’t working. I’ll try the footer tip. Thank you

  • @mba had to work out Uai! Glad you solved!

  • 1

    So thanks to your help. Thanks bro. Hugs.

Show 4 more comments

Browser other questions tagged javascript css

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