首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何更改"datatable“打印按钮的默认css?

如何更改"datatable“打印按钮的默认css?
EN

Stack Overflow用户
提问于 2016-02-15 08:15:31
回答 2查看 11.6K关注 0票数 1

如何在datatable插件中更改打印和excel按钮的css。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                    $('#order_table').DataTable({
                        dom: 'Brtip',
                        buttons: [
                             'print','excel'
                        ]
                    });
                });
EN

回答 2

Stack Overflow用户

发布于 2016-02-15 09:43:55

每个按钮都有一个唯一的基类.buttons-print.buttons-excel.buttons-copy等,所以你可以直接用CSS设置按钮的样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.buttons-print {
  background-color: red;
  color: white;
}
.buttons-excel {
  background-color: blue;
  color: white;
}

演示->

要将.btn-default替换为.btn-primary

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.buttons-excel, .buttons-print').each(function() {
   $(this).removeClass('btn-default').addClass('btn-primary')
})

演示->

票数 3
EN

Stack Overflow用户

发布于 2016-02-16 06:55:42

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   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.
                            }
                        ]
                    });

为此,您必须添加数据表的TableTools插件。http://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js

让我知道这是否有帮助。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35404378

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文