Javascript 选中每个按钮的复选框，以选择Datatables 1.10中不带ColVis的列

由于Datatables 1.10中不推荐使用ColVis，我正在寻找一种方法，在每个按钮上添加一个复选框，以选择表中的一列，方法与使用ColVis的方法相同

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

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

我非常感谢您在这方面提供的专业知识。

解决方案 复选框已替换为插入/开始样式。但是，您可以使用CSS模拟复选框，请参见以下规则：

.dt按钮集合a.buttons-columnVisibility:before，
.dt按钮集合a.buttons-columnVisibility.active span:之前{
显示：块；
位置：绝对位置；
顶部：1.2米；
左：0；
宽度：12px；
高度：12px；
框大小：边框框；
}
.dt按钮集合a.按钮-列可见性：之前{
内容：''；
利润上限：-6px；
左边距：10px；
边框：1px纯黑；
边界半径：3px；
}
.dt按钮集合a.buttons-columnVisibility.active span:之前{
内容：'\2714'；
利润上限：-11px；
左边距：12px；
文本对齐：居中；
文本阴影：1px 1px#DDD，-1px-1px#DDD，1px-1px#DDD，-1px 1px#DDD；
}
.dt按钮集合a.buttons-Column可见性范围{
左边距：20px；
}

演示 有关代码和演示，请参阅

笔记

---

查看您的问题，解释为什么

操作
对
列切换
按钮不起作用。
我基于@gyrocode com的答案，使其看起来不那么“button-y”，更像一个简单的复选框列表，以及支持更新版本的DataTables和Buttons，因为它们现在使用
HTML标记生成colvis按钮，而不是

CSS
.dt按钮集合.dt-button.buttons-columnVisibility{
背景：无！重要；
背景色：透明！重要；
盒影：无！重要；
边界：没有！重要；
填充：0.25em 1em！重要；
边距：0！重要；
文本对齐：左！重要；
}
.dt按钮集合。按钮列可见性：之前，
.dt按钮集合。按钮-列可见性。活动范围：之前{
显示：块；
位置：绝对位置；
顶部：1.2米；
左：0；
宽度：12px；
高度：12px；
框大小：边框框；
}
.dt按钮集合。按钮列可见性：之前{
内容：''；
利润上限：-8px；
左边距：10px；
边框：1px纯黑；
边界半径：3px；
}
.dt按钮集合。按钮-列可见性。活动范围：之前{
字体系列：“Arial”！重要；
内容：'\2714'；
利润上限：-15px；
左边距：12px；
文本对齐：居中；
文本阴影：1px 1px#fff，-1px-1px#fff，1px-1px#fff，-1px 1px#fff；
}
.dt按钮集合.按钮列可见性范围{
左边距：17px；
}

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

按钮：[{
扩展：“colvis”，
collectionLayout:“两列”
}]


演示
作为一个现场演示。
谢谢，我确实看到了您对我上一篇文章的回答，您在其中解释了为什么
操作
不适用于
columnsToggle
。我编辑了上面的代码和我在问题中提到的代码，以反映
操作
功能不适用于
columnsToggle
。你救了我一天，伙计。很好的解决方案。此选项适用于角度数据表。请注意，
a.buttons-columnVisibility
可能过于具体：如果将按钮渲染为
或更改渲染按钮上的类，则选择器将丢失。因此，再次检查CSS中选择的DOM是否与实际DOM匹配。就我而言，我需要替换
a.buttons-columnVisibility
或
.buttons.columnVisibility
。@bishop：我检查了所有内容后看到了你的评论！谢谢我看不到使用上述代码的复选框。我想要带复选框的按钮。有什么帮助吗？