How to remove print button from mobile view

gpapaiko

Hi
I know this might have already been answered.

I have a page (several) that have the print buttons (print/excel/pdf) on then and that is great I do use them on my PC.
BUT when I use the same site on my mobile, I would like to hide the print buttons.
Is there a way to hide the print buttons only when the site is being viewed on a mobile device?
I know I can create a new "mobile" site and remove them but that would mean I would be duplication all the site pages, that would be a last option only.

   $('#stocktbl').DataTable({
                "pagingType": "full_numbers",
                scrollY: 300,
                ordering:  true,
                select: true,
                responsive: true,
                "initComplete": function(settings, json) {
                    $('div.loading').remove();
                    //alert( 'DataTables has finished its initialisation.' );

                  },
                dom: 'Bfrtip',
                lengthMenu: [
                    [ 10, 25, 50, 75, 100, -1 ],
                    [ '10 rows', '25 rows', '50 rows', '75 rows', '100 rows', 'Show all' ]
                ],
                buttons: [
                    'pageLength',
                    {
                        extend: 'print',
                        text: 'Print all',
                        exportOptions: {                            
                            modifier: {                             
                                selected: null,
                                columns: ':visible'
                            },                          
                             columns: ':visible'                             
                        },                          
                        customize: function (win) {
                            $(win.document.body)
                                .css( 'font-size', '10pt' )
                                .prepend(
                                    '<img src="img/logo.png" style="position:absolute; top:0; left:0;" />'
                                );
         
                            $(win.document.body).find('table').addClass('display').css('font-size', '9px');
                            $(win.document.body).find('tr th').each(function(index){
                                $(this).css('background-color','#000000');
                                $(this).css('color','#FFFFFF');
                            });
                            $(win.document.body).find('tr:nth-child(odd) td').each(function(index){
                                $(this).css('background-color','#D0D0D0');
                            });
                            $(win.document.body).find('tr:nth-child(even) td').each(function(index){
                                $(this).css('background-color','#f2f2f2');
                            });
                            $(win.document.body).find('h1').css('text-align','left');
                            $(win.document.body).find('td:nth-child(1)').each(function(index){ 
                                $(this).css('width', '5%', 'max-width', '5%');
                            });
                            
                        }
                    },
                    {
                        extend: 'print',
                        text: 'Print selected',
                        exportOptions:{
                            columns: ':visible'
                        },
                        customize: function (win) {
                            $(win.document.body)
                                .css( 'font-size', '10pt' )
                                .prepend(
                                    '<img src="img/logo.png" style="position:absolute; top:0; left:0;" />'
                                );
         
                            $(win.document.body).find('table').addClass('display').css('font-size', '9px');
                            $(win.document.body).find('tr th').each(function(index){
                                $(this).css('background-color','#000000');
                                $(this).css('color','#FFFFFF');
                            });
                            $(win.document.body).find('tr:nth-child(odd) td').each(function(index){
                                $(this).css('background-color','#D0D0D0');
                            });
                            $(win.document.body).find('tr:nth-child(even) td').each(function(index){
                                $(this).css('background-color','#f2f2f2');
                            });
                            $(win.document.body).find('h1').css('text-align','left');
                            
                        }
                    },
                    {
                        extend: 'pdf',
                        text: 'Save to PDF',
                        exportOptions:{
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'excel',
                        text: 'Save to Excel',
                        exportOptions:{
                            columns: ':visible'
                        }
                        
                    },
                    
                    
                    'colvis',

                ],
                columnDefs: [ {
                    targets: -1,
                    visible: true
                } ]
            }); //end of datatble

colin

Probably the easiest way would be in initComplete, check the dimensions of the screen or detect the browser type, and if you deem it's a mobile, just remove the buttons with buttons().remove(). You could also perform the same tests even before you initialise the table, and only add buttons if not a mobile.

Colin

rf1234

Just tried this and it worked. You can adjust the px size to your needs of course. Cool idea to hide some buttons on smaller screens!

@media (max-width: 600px) {
  .hide-for-mobile {
      display: none
  }
}

buttons: [        
    {   extend: "print", className: "hide-for-mobile" }
]

gpapaiko

Hi all,

Thanks for the ideas, I will try them and see which one works best, but I do like the @media...option I am using for other areas so i can just add the "hide-for-mobile" class to it and the class to the buttons.