JQuery Datatable - 操作 Colvis 按钮的 CSS答案

【问题标题】：JQuery Datatable - Manipulating the CSS of the Colvis buttonsJQuery Datatable - 操作 Colvis 按钮的 CSS
【发布时间】：2017-05-05 15:02:33
【问题描述】：

我目前正在为我的 .Net MVC Web 应用程序使用 JQuery 数据表。

我在 UI 中添加了默认的 colvis 按钮。

我有两个问题：

我们可以为这些操作 CSS。就像改变渐变或通过颜色区分它们（浅色用于取消选中的颜色，深色用于选定的颜色？如果可能的话，我们如何做到这一点？
我们可以在这个列表中添加滚动条吗？因为我们需要滚动整个页面才能查看完整列表？

我可以通过使用以下代码来操作 colvis 按钮的 CSS：

.dataTables_wrapper .dt-buttons { //css code here}

但是当单击“colvis”按钮时，我无法找到操作列名按钮的解决方案。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

终于搞定了。

我修改了buttons.dataTables.min.css文件。

代码如下：

//根据自己的喜好修改 background-image 的值。它会改变 // 可见的列按钮颜色。我已将其更改为绿色 - #76b900。

div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled), div.dt-button-collection div.dt-button:active:not(.disabled), div.dt-button-collection div.dt-button.active:not(.disabled), div.dt-button-collection a.dt-button:active:not(.disabled), div.dt-button-collection a.dt-button.active:not(.disabled) {
            background-color: #dadada;
            background-image: -webkit-linear-gradient(top, #76b900 0%, #dadada 100%);
            background-image: -moz-linear-gradient(top, #76b900 0%, #dadada 100%);
            background-image: -ms-linear-gradient(top, #76b900 0%, #dadada 100%);
            background-image: -o-linear-gradient(top, #76b900 0%, #dadada 100%);
            background-image: linear-gradient(to bottom, #76b900 0%, #dadada 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#dadada');
            box-shadow: inset 1px 1px 3px #666;
            font-family: 'Trebuchet MS',sans-serif;
            font-size: 12px;
        }

//更改悬停时的颜色 - 我已将其更改为#ADFF2F

button.dt-button:active:not(.disabled):hover:not(.disabled), button.dt-button.active:not(.disabled):hover:not(.disabled), div.dt-button:active:not(.disabled):hover:not(.disabled), div.dt-button.active:not(.disabled):hover:not(.disabled), a.dt-button:active:not(.disabled):hover:not(.disabled), a.dt-button.active:not(.disabled):hover:not(.disabled) {
            box-shadow: inset 1px 1px 3px #999999;
            background-color: #cccccc;
            background-image: -webkit-linear-gradient(top, #ADFF2F 0%, #ccc 100%);
            background-image: -moz-linear-gradient(top, #ADFF2F 0%, #ccc 100%);
            background-image: -ms-linear-gradient(top, #ADFF2F 0%, #ccc 100%);
            background-image: -o-linear-gradient(top, #ADFF2F 0%, #ccc 100%);
            background-image: linear-gradient(to bottom, #ADFF2F 0%, #ccc 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#eaeaea', EndColorStr='#cccccc');
        }

【讨论】：

无法添加滚动条。

【解决方案2】：

不确定您是否已经弄清楚了，但仍在继续寻找答案。

要更改高度和添加滚动条，您可以更改类 dt-button-collection，如下所示。

.dt-button-collection{

    display: block;
    height: 450px !important;
    overflow-y: scroll !important;
}

【讨论】：