每个按钮的复选框可以在没有ColVis的Datatables 1.10中选择列 [英] Checkbox for each button to select a column in Datatables 1.10 without ColVis

问题描述

由于ColVis在Datatables 1.10中已被弃用，我正在寻找一种方法来添加一个复选框到每个按钮，以与在示例。

在以下 JSFiddle 中是什么已经做到了这一点。以下是我正在使用的代码。

  $（document）.ready（function（）{
 var table = $（'＃example'）。DataTable（{
 dom：'B'，
buttons：[
 {
 extends：'colvis'，
 postfixButtons：[
 {
 extend：'colvisRestore'，
 text：'Restore'
} 
]，
按钮：[{
扩展：'columnsToggle'，
}]，
} 
]，
} 
）;}）; 
  

我非常感谢您对此的专业知识。

解决方案

解决方案

复选框已被插入/开始样式替换。但是，您可以使用CSS模拟复选框，请参阅以下规则：

  .dt-button-收集a.buttons-columnVisibility：before，
 .dt-button-collection a.buttons-columnVisibility.active span：before {
 display：block; 
 position：absolute; 
顶部：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; 
文本阴影：1px 1px #DDD，-1px -1px #DDD，1px -1px #DDD，-1px 1px #DDD; 
} 
 
 .dt-button-collection a.buttons-columnVisibility span {
 margin-left：20px; 
} 
  

演示

请参阅此jsFiddle 进行代码和演示。

注意

请参阅我的其他答案解释为什么的问题动作不适用于 columnsToggle 按钮。

As ColVis is deprecated in Datatables 1.10, I am looking for a way to add a checkbox to each button to select a column in the table in the same way it is done in this example that uses ColVis.

In the following JSFiddle is what I have done so far. Below is the code that I am using.

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

I would really appreciate your share of expertise on this one.

解决方案

SOLUTION

Checkboxes has been replaced by inset/outset styles. However you can simulate a checkbox using CSS, see the rules below:

.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

See this jsFiddle for code and demonstration.

NOTES

See my other answer to your question explaining why action will not work for columnsToggle button.

这篇关于每个按钮的复选框可以在没有ColVis的Datatables 1.10中选择列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！