colVis Group Relationated

Show/Hide Group o relationated columns.

by Gonzalo Guevara

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/colvis/1.1.0/css/dataTables.colVis.css">
<script src="https://cdn.datatables.net/colvis/1.1.0/js/dataTable.colVis.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<div class="wrapp-table">
												<table id="biblioTabla2" class="table table-bordered table-striped">
											        <thead>
											          <tr>
											            <th>Autor</th>
											            <th>Título</th>
											            <th>Genero</th>
											            <th>Cantidad</th>
											            <th>Bloque</th>
											            <th>Sistema</th>
											            <th>Locación</th>
											            <th>Priridad</th>
											            <th>Costo</th>
											            <th>Total</th>
											            <th class="text-center"><i class="glyphicon glyphicon-save"></i></th>
											          </tr>
											        </thead>
											        <tbody>
											          <tr>
											            <td>Table cell</td>
											            <td>Table cell</td>
											            <td>Lorem ipsum dolor sit</td>
											            <td>Lorem ipsum dolor sit</td>
											            <td>Lorem ipsum dolor sit</td>
											            <td>Lorem ipsum dolor sit</td>
											            <td>Lorem ipsum dolor sit</td>
											            <td>Lorem ipsum dolor sit</td>
											            <td>Lorem ipsum dolor...

CSS

.wrapp-table th,
.wrapp-table td {	
   white-space: nowrap;
}

 div.dataTables_wrapper {
    width: 95%;
    margin: 0 auto;
}

JavaScript

$('#biblioTabla2').DataTable({
    "scrollY": 300,
    "scrollX": true,
    "dom": 'C<"clear">lfrtip',
    "colVis": {
        "exclude": ['all'],
        "groups": [
            {
                "title": "Group One",
                "columns": [ 0, 1 ]
            },
            {
                "title": "Group Two",
                "columns": [ 2, 3 ]
            }
        ]
    }
});