DataTables下拉按钮样式

时间:2019-12-25 08:57:20

标签: javascript jquery datatables metronic

我在带有Metronic v6管理面板模板的项目中使用DataTables。但是DataTables下拉菜单中的导出按钮样式似乎不正确。我在DataTables样式表或DataTables js中什么都没有。

我的dom码

dom: '<"row"<"col-8"B><"col-3 float-right"f><"col-1 float-right"l>>rtip',
                buttons: [
                    {
                        extend: 'collection',
                        text: '<i class="fa fa-ellipsis-v"></i>',
                        className: 'btn btn-primary btn-elevate btn-icon btn-sm btn-square',
                        buttons: [
                            { text: 1 },
                            { text: 2 },
                            { text: 3 },
                            { text: 4 },
                            { text: 5 }
                        ],
                        dropup: true
                    },
                    { extend: 'copy', className: 'btn btn-warning btn-elevate btn-icon btn-sm btn-square', titleAttr:'Copy', text:'<i class="fa fa-file-alt"></i>' },
                    { extend: 'excel', className: 'btn btn-success btn-elevate btn-icon btn-sm btn-square', titleAttr:'Excel', text:'<i class="fa fa-file-excel"></i>'},
                    { extend: 'pdf', className: 'btn btn-google btn-elevate btn-icon btn-sm btn-square', titleAttr:'PDF', text: '<i class="fa fa-file-pdf"></i>' },
                    { extend: 'colvis', className: 'btn btn-info btn-elevate btn-icon btn-sm btn-square', titleAttr:'PDF', text: '<i class="fa fa-eye"></i>' },

                ],

它看起来像这样: enter image description here

但是在我单击下拉按钮后,它看起来像这样: enter image description here

2 个答案:

答案 0 :(得分:0)

您正在使用哪个datatTable JS版本?

答案 1 :(得分:0)

我使用DataTables发布的版本:https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js

版本:DataTables 1.10.20

相关问题