javascript - exportar - exportoptions datatables

Casilla de verificación para cada botón para seleccionar una columna en Datatables 1.10 sin ColVis

Question

Como ColVis está en desuso en Datatables 1.10, estoy buscando una manera de agregar una casilla de verificación a cada botón para seleccionar una columna en la tabla de la misma manera que en este ejemplo que usa ColVis.

En lo siguiente JSFiddle es lo que he hecho hasta ahora. A continuación está el código que estoy usando.

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

Realmente apreciaría su parte de experiencia en este caso.

Answer 1

SOLUCIÓN

Las casillas de verificación se han reemplazado por estilos de inserción / inicio. Sin embargo, puede simular una casilla usando CSS, consulte las reglas a continuación:

.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;
}

MANIFESTACIÓN

Ver este jsFiddle para código y demostración.

NOTAS

Vea mi otra respuesta a su pregunta explicando por qué la action no funcionará para las columnsToggle Botón de columnsToggle .