每个按钮的复选框,用于选择没有ColVis的Datatables 1.10中的列

Question

由于ColVis在Datatables 1.10中已被弃用,我正在寻找一种方法来为每个按钮添加一个复选框,以便在本例中使用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:'\2714';
    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;    
}

DEMO

有关代码和演示,请参阅此jsFiddle.

笔记

请参阅我的问题的其他答案,解释为什么action不能用于columnsToggle按钮.