The Buttons do not have borders

sarojthapa60

I am using DataTables plugin with HTML (DOM) sourced data. I have Hide, Show, Excel, CSV, PDF, and Print buttons. The buttons are clickable but they look like anchor tags without any border. How can I make these buttons look like real buttons and not like anchor tags? I have 30 columns altogether and some cells have background colors. How can I customize my Print button to print in 11 by 17 with preserving the cells' colors?
My JQuery script for datatables:

        $(document).ready(function() {
            $('#myTable').DataTable( {
                "order": [[0, "asc"]],

                "paging": false,
                "scrollCollapse": true,

                "columnDefs": [{
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                }],

                dom: 'Bfrtip',
                buttons:
                [
                    {
                        extend: 'colvisGroup',
                        text: 'Hide',
                        show: [1, 2, 3, 4, 5, 6, 7, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
                        hide: [0, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
                    },

                    {
                        extend: 'colvisGroup',
                        text: 'Show All',
                        show: ':hidden'
                    },

                    {
                        extend: 'excelHtml5',
                        exportOptions:{
                            columns:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
                        }
                    },

                    {
                        extend: 'csvHtml5',
                        exportOptions:{
                            columns:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
                        }
                    },

                    {
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                        pageSize: 'A2',
                        exportOptions: {
                            columns:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]}
                    },

                    {
                        extend: 'print',
                        text: 'Print',
                        orientation: 'landscape',
                        pageSize: 'A2',
                        exportOptions: {
                            columns:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
                        }
                    }
                    ]

            } );
        } );

[https://jsfiddle.net/q07nbom5/]

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The fiddle won't run as there are no external resources, however, my guess is that the Buttons CSS hasn't been loaded. To be certain I'd need a link to a page showing the issue, but I'd recommend using the download builder to make sure you get all the files you require.

Allan

sarojthapa60

Thanks Allan. Some cells in my table havr background colors - green, red,and amber. How can I make those colors be visible when printing using print button of Datatables?Thanks

allan

You would need to use the customize option of the print button to modify the HTML of the print table (adding classes for example).

Allan