Estoy creando una tabla dinámica en ASP.NET con la ayuda de Datatables libreria de Javascript y jQuery y estoy presentando un problema al momento de utilizar la colección de botones colvis, esta coleccion crea un boton que cuando se active, mostrará una lista de las columnas en la tabla y proporcionará al usuario final la capacidad de alternar la visibilidad de la columna para satisfacer sus propios requisitos.
Sucede que en mi tabla no se esta cargando esa colección o no se esta mostrando, necesito hacerlo con colvis para permitirle al usuario ver las columnas que el decida, esto lo hago porque la tabla tiene bastantes columnas
De esta manera estoy cargando el datatable
RecordsTable.js
$(document).ready(function () {
var table=$("#recordsTable").DataTable({
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
"processing": true,
"serverSide": true,
"responsive": true,
"scrollX": true,
"ajax": {
"url": document.getElementById("table").value,
"type": "POST",
"dataType": "json"
},
"language": {
"lengthMenu": "Mostrar _MENU_ registros",
"zeroRecords": "No se encontró nada",
"info": "Mostrando del _START_ al _END_ de un total de _TOTAL_",
"infoEmpty": "No hay registros",
"emptyTable": "No hay datos para mostrar",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"infoFiltered": "(filtrado de un total de _MAX_ registros)",
"paginate": {
"first": "Primera",
"last": "Última",
"next": "Siguiente",
"previous": "Anterior"
},
//Aqui agrego la coleccion de botones
"buttons": {
"colvis": "Visibilidad de columnas"
}
},
"columns": [
{
"className": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "title": "#", "data": "RecordId", "searchable": true },
{ "title": "Fecha de Registro", "data": "RecordDate", "searchable": true },
{
"title": "Acción", "data": "RecordAction", "fnCreatedCell": function (nTd, sData, oData) {
if (oData.RecordAction === "Se han cargado archivos nuevos") {
$(nTd).html(`<a href="#!" onclick="filesRequest(${oData.RecordId})" data-id=${oData.RecordId}>${oData.RecordAction}</a>`);
}
else {
$(nTd).html(`<td>${oData.RecordAction}</td>`);
}
}, "searchable": true
},
{ "title": "Nota", "data": "RecordNote", "searchable": true },
{ "title": "Solicitante", "data": "RecordUpdate", "searchable": true },
{ "title": "Asignado", "data": "RecordAsigned", "searchable": true },
{ "title": "Estado", "data": "RecordStatus", "searchable": true }
],
orderCellsTop: true,
lengthChange: false,
buttons: {
buttons: [
{
extend: 'colvis',
className: 'btn btn-primary',
init: function (api, node, config) {
$(node).removeClass('dt-button')
}
}
]
}
});
initComplete: table.buttons().container()
.appendTo($('#recordsTable_wrapper .col-md-6:eq(0) '));
});
De esta manera creo la tabla
Index.cshtml
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/buttons/1.0.1/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.js"></script>
<script src="//cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.1.0/js/buttons.colVis.min.js"></script>
<meta charset=utf-8 />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="TableDiv" class="card shadow mb-4">
<div class="card-header py-3">
<h4 class="m-0 font-weight-bold text-primary">Historial</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="recordsTable" class="display compact responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Número de Registro</th>
<th>Fecha de Registro</th>
<th>Solicitante</th>
<th>Acción</th>
<th>Nota</th>
<th>Asignado</th>
<th>Estado</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
Quisiera saber que estoy haciendo mal con el datatable que no me esta mostrando el colvis o como debería de hacerlo