首页 > 解决方案 > DataTables 下拉按钮样式

问题描述

我在我的项目中使用 DataTables 和 Metronic v6 管理面板模板。但 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>' },

                ],

它看起来像这样: 在此处输入图像描述

但是在我单击下拉按钮后,它看起来像这样: 在此处输入图像描述

标签: javascriptjquerydatatablesmetronic

解决方案


您使用的是哪个 datatTable JS 版本?


推荐阅读