CODEWITHSUNDEEP
jquerycssdatatables
Abdul Razak
Abdul Razak

Reputation: 259

How can I change default css of "datatable" print button?

How can I change the css of print and excel buttons in datatable plugin.

                    $('#order_table').DataTable({
                        dom: 'Brtip',
                        buttons: [
                             'print','excel'
                        ]
                    });
                });

Upvotes: 0

Views: 13994

Answers (2)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

   var orderDataTable =  $('#order_table').DataTable({
                        dom: 'Brtip',
                        buttons: [
                             'print','excel'
                        ]
                    });



     var tableTools_obj = new $.fn.dataTable.TableTools(orderDataTable , {
                    "sSwfPath": "swf/copy_csv_xls_pdf.swf",
                    "aButtons": [                           
                            {
                                "sExtends": "xls",
                                "sTitle": "OrdersReport",
                                "sToolTip": "Export to Excel",
                                "sButtonClass": "btn btn-transparent btn-primary btn-toolbar", // Here you can give all the classes realated to button with custom styles.
                                "sButtonText": "<i title='Export To Excel' class='ace-icon fa fa-file-excel-o white icon-tooltip'></i>", //overriding the default icon of Datatables, Here I am using Fontawsome icons
                               // "mColumns": GetExportableColumnsIndexes(); //this is to filter out hidden or unwanted columns form being exported.
                              // Usually it requires array on indexes, I prefer to call a function with some logic handling and returning the  required indexes.
                            }
                        ]
                    });

For this you must add the TableTools plugin of datatables. http://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js

Let me know if this was helpful.

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85598

Each button have a unique base class .buttons-print, .buttons-excel, .buttons-copy etc. So you can style the buttons directly with CSS 

.buttons-print {
  background-color: red;
  color: white;
}
.buttons-excel {
  background-color: blue;
  color: white;
}

demo -> https://jsfiddle.net/mg28pxe2/

To replace .btn-default with .btn-primary :

$('.buttons-excel, .buttons-print').each(function() {
   $(this).removeClass('btn-default').addClass('btn-primary')
})

demo -> https://jsfiddle.net/48rcjrw3/

Upvotes: 3

Related Questions