2

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.

Documentacion de colvis

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

1 respuesta 1

3

Creo que te falta agregar algunas librerías extras que se encuentran dentro de la librería de Datatables o tal vez no tengas las mas actuales.

Por ejemplo: las que se llaman dataTables.buttons, esa es aparte de la librería llamada buttons.colVis, todas esas son necesarias para que el ColVis pueda funcionar.

Te dejo un ejemplo con datos ficticios:

$(document).ready(function() {
    var table = $("#example").DataTable({
        "lengthMenu": [
            [10, 25, 50, 100],
            [10, 25, 50, 100]
        ],
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "scrollX": true,
        "ajax": 'https://api.myjson.com/bins/qgcu',
        "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"
            },
        },

        orderCellsTop: true,
        lengthChange: false,
        dom: 'Brtip',
        buttons: [{
            extend: 'colvis',
            collectionLayout: 'fixed three-column',
            postfixButtons: ['colvisRestore']
        }]
    });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th rowspan="2" valign="bottom">
                Name
                <br>
                <input type="text" id="0" class="employee-search-input">
            </th>
        </tr>
        <tr>
            <th>
                Position
                <br>
                <input type="text" id="2" class="employee-search-input">
            </th>
            <th>
                City
                <br>
                <input type="text" id="3" class="employee-search-input">
            </th>
            <th>
                Age
                <br>
                <input type="text" id="4" class="employee-search-input">
            </th>
            <th>
                Joining date
                <br>
                <input readonly="readonly" type="text" id="5" class="employee-search-input datepicker">
            </th>
            <th>
                Salary
                <br>
                <input type="text" id="6" class="employee-search-input">
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

Espero te sirva.

1
  • Funciono perfecto me hacia falta agregar el dom
    – John Doe
    Commented el 12 sept. 2019 a las 21:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.