0

Necesito modificar una hoja de Excel, de manera que pueda agrugar un determinado numero de columnas y agregar texto o algun elemento html de manera que sea como los ejemplos. El siguiente codigo, al que le es pasado json desde el controlador para generar una tabla y descargar un reporte actualmente me devuelve este formato

y necesito que renderize algo como esto

introducir la descripción de la imagen aquí

@section Scripts
    {
    <script>
        var tabla;
            $.datepicker.setDefaults($.datepicker.regional['es']);
            $("#txtFechaInicio").datepicker({ dateFormat: 'dd/mm/yy' }).datepicker('setDate', new Date());
            $("#txtFechaFin").datepicker({ dateFormat: 'dd/mm/yy' }).datepicker('setDate', new Date());
            tabla = $("#tbdata").DataTable({
                dom: "Bfrtip",
                buttons: [
                    {
                        text: 'Exportar Excel',
                        extend: 'excelHtml5',
                        title: '',
                        filename: 'Schedule Control Report'
                    }, 'pageLength'
                ],
                pageLength: 10,
                responsive: true,
                "ajax": {
                    "url": '@Url.Action("Reporte", "Adm")?fechaInicio=' + $("#txtFechaInicio").val() + "&fechaFin=" + $("#txtFechaFin").val(),
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "periodoRegistro" },
                    { "data": "diaSemana" },
                    { "data": "fecha" },
                    { "data": "valores" },
                ],
                order: [[1, 'asc']],
                rowGroup: {
                    startRender: function (rows, group) {
                        var grupo = group.split(",")
                        return $('<tr class="bg-light">').append(

                        )
                    },
                    endRender: function (rows, group) {
                        var total = rows.data().pluck("valores").reduce(function (a, b) { return a + b; }, 0);
                        return $('<tr class="bg-light">').append(
                            $('<td colspan="2">'),
                            $('<td>').text('Total'),
                            $('<td>').text(total.toFixed(2))
                        )
                    },
                },
                "columnDefs": [
                    { "visible": true, "targets": 0 },
                    { "visible": true, "targets": 1 },
                    { "visible": true, "targets": 2 },
                    { "visible": true, "targets": 3 },
                ],
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json"
                }
            })
        })
    </script>
1
  • Podrias especificar de que forma son agrupadas las columnas para que puedas integrar elementos html y mostrar texto, veo que desde la columnas 1:4 y 9:14, si nombras las clases o algun metodo en especifico que sea referente a title(), header(), group(), column o algo asi
    – user327285
    Commented el 27 abr. 2023 a las 15:16

1 respuesta 1

0

Al momento que defines una nueva instancia de DataTable() tienes disponible una serie de opciones las cuales son usadas como parámetros con el objetivo de configurar de diferentes formas la tabla de datos como el estilo de texto, límite de páginas, orden de columnas, entre otros... Te recomendio chequear rowGroup().enable() y rowGroup().dataSrc(), no estoy seguro si podrían relacionarse con la agrupación de columnas (en el ejemplo 1, 2, 3, 4) para que puedas talvez agregar algun elemento como <div><h1>Reporte Ejemplo</h1></div>, tambien puedes revisar la extension fixedHeader y el evento draw().

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.