How to remove print button from mobile view
How to remove print button from mobile view
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
Answers
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 withbuttons().remove()
. You could also perform the same tests even before you initialise the table, and only add buttons if not a mobile.Colin
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!
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.