Question

我目前正在使用JQuery Datatable作为我的.Net MVC Web应用程序。

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

我有两个问题：

我们可以为这些操纵CSS吗？比如改变渐变或用颜色区分颜色（取消选择的颜色和选择颜色的暗颜色？如果可能的话，我们怎么做？
我们可以将滚动条添加到此列表中吗？我们需要滚动整个页面来查看完整列表吗？

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

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

但是当点击'colvis'按钮时，我无法达到操纵列名按钮的解决方案。

Answer 1

不确定你是否已经解决了这个问题，但仍然继续回答。

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

.dt-button-collection{

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

Answer 2

终于搞定了。

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

以下是代码：

//根据您的喜好修改背景图片值。它会更改//可见的列按钮颜色。我已将其更改为绿色 - ＃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');
        }

JQuery Datatable - 操作Colvis按钮的CSS

2 个答案: