每个按钮的复选框 select Datatables 1.10 中没有 ColVis 的列

Question

由于 ColVis 在 Datatables 1.10 中被弃用，我正在寻找一种方法来为 select 中 table 中的列的每个按钮添加一个复选框example 中使用 ColVis 的方法。

下面JSFiddle是我到目前为止所做的。下面是我正在使用的代码。

$(document).ready(function() {
var table = $('#example').DataTable( {
    dom: 'B',
    "buttons": [
                {
                    extend: 'colvis',
                    postfixButtons: [
                        {
                            extend: 'colvisRestore',
                            text: 'Restore'
                        }
                    ],
                    buttons : [{
                        extend: 'columnsToggle',
                    }],
                }
            ],
    }
); } );

非常感谢您分享这方面的专业知识。

Answer 1

解决方案

复选框已被 inset/outset 样式取代。但是，您可以使用 CSS 模拟复选框，请参阅以下规则：

.dt-button-collection a.buttons-columnVisibility:before,
.dt-button-collection a.buttons-columnVisibility.active span:before {
    display:block;
    position:absolute;
    top:1.2em;
    left:0;
    width:12px;
    height:12px;
    box-sizing:border-box;
}

.dt-button-collection a.buttons-columnVisibility:before {
    content:' ';
    margin-top:-6px;
    margin-left:10px;
    border:1px solid black;
    border-radius:3px;
}

.dt-button-collection a.buttons-columnVisibility.active span:before {
    content:'14';
    margin-top:-11px;
    margin-left:12px;
    text-align:center;
    text-shadow:1px 1px #DDD, -1px -1px #DDD, 1px -1px #DDD, -1px 1px #DDD;
}

.dt-button-collection a.buttons-columnVisibility span {
    margin-left:20px;    
}

演示

有关代码和演示，请参阅 this jsFiddle。

注意事项

请参阅您的问题，解释为什么 action 不适用于 columnsToggle 按钮。

Answer 2

我在@gyrocode-com 的回答的基础上使它看起来不那么“button-y”，更像是一个简单的复选框列表至于支持更新版本的数据表和按钮，因为它们现在使用 <button> HTML 标签而不是 <a>.

生成 colvis 按钮

buttons: ['colvis']

CSS

.dt-button-collection .dt-button.buttons-columnVisibility {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0.25em 1em !important;
    margin: 0 !important;
    text-align: left !important;
}
.dt-button-collection .buttons-columnVisibility:before,
.dt-button-collection .buttons-columnVisibility.active span:before {
    display:block;
    position:absolute;
    top:1.2em;
    left:0;
    width:12px;
    height:12px;
    box-sizing:border-box;
}
.dt-button-collection .buttons-columnVisibility:before {
    content:' ';
    margin-top:-8px;
    margin-left:10px;
    border:1px solid black;
    border-radius:3px;
}
.dt-button-collection .buttons-columnVisibility.active span:before {
    font-family: 'Arial' !important;
    content:'14';
    margin-top: -15px;
    margin-left: 12px;
    text-align: center;
    text-shadow: 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.dt-button-collection .buttons-columnVisibility span {
    margin-left:17px;    
}

这也适用于 multi-column colvis 模板，例如 two-column 和 fixed two-column。

buttons: [{
     extend: 'colvis',
     collectionLayout: 'two-column'
  }]

演示

JSFiddle 现场演示。

每个按钮的复选框 select Datatables 1.10 中没有 ColVis 的列

Checkbox for each button to select a column in Datatables 1.10 without ColVis

javascript

datatables

解决方案

演示

注意事项

CSS

演示