Как показывание коллекции кнопок в Datatables

Я создаю динамическую таблицу в ASP.NET с помощью Datatables книжный магазин Javascript и jQuery и представляю проблему в момент использования коллекции кнопок colvis, эта коллекция верьте в кнопку, которая, когда он будет включен, покажет список колонн в таблице и будет предоставлять конечному пользователю способность чередовать видимость колонны, чтобы удовлетворять ее собственные обязательные условия, что-то подобное этому примеру.

introducir la descripción de la imagen aquí

Документация colvis

Случается, что в моей таблице не загружена эта коллекция или не появляется, я нуждаюсь в том, чтобы сделать это с colvis, чтобы позволять пользователю видеть колонны, что decida, я это делаю, потому что у таблицы есть достаточно колонн

Таким образом я загружаю 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(`${oData.RecordAction}`);
                    }
                    else {
                        $(nTd).html(`${oData.RecordAction}`);
                    }
                }, "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) '));

});

Таким образом я верю в таблицу

Index.cshtml












Historial

Número de Registro Fecha de Registro Solicitante Acción Nota Asignado Estado

Я хотел бы знать, что я врежу с datatable, который не показывает мне colvis, или как он был бы должен делать это

2
задан 10.09.2019, 15:26
1 ответ

Я думаю, что тебе остается добавлять какие-то, librer¦-схвати дополнительные, что находятся внутри librer¦ - в Datatables, или возможно не имей самых настоящих.

Например : которые называются dataTables.buttons, эта помимо librer¦ - в вызов buttons.colVis, все эти необходимы для того, чтобы ColVis оно смогло функционировать.

оставил Тебе пример с фиктивными данными:

$(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>

Надеялся, что он подает тебя.

3
ответ дан 11.11.2019, 01:15
  • 1
    Я функционирую совершенно мне было надо добавлять dom – Sebastian Salazar 12.09.2019, 14:08

Теги

Похожие вопросы