Tablas de datos: fila de tabla con formato incorrecto no detectada, una celda no está definida al intentar exportar a PDF

Nov 09 2020

Tengo la siguiente tabla,

<table id="dtBasicExample" class="table table-bordered" style="border : none;">
    <thead class="text-info" style="border : none;">
        <tr>
            <th colspan="16" style="border : none;"></th>
        </tr>
        <tr>
            <th colspan="2" class="text-right" style="border : none;">Date</th>
            <th colspan="14" style="border : none;">: <%=dstart%> - <%=dend%></th>
        </tr>
        <tr>
            <th colspan="2" class="text-right" style="border:none;">Personel</th>
            <th colspan="14" style="border : none;">: <%=pers%></th>
        </tr>
        <tr>
            <th colspan="2" class="text-right" style="border:none;">Grade</th>
            <th colspan="14" style="border : none;">: <%=grade%></th>
        </tr>
        <tr>
            <th colspan="2" class="text-right" style="border:none;">Date Generated</th>
            <th colspan="14" style="border : none;">: <%=nowdate %></th>
        </tr>
        <tr>
            <th colspan="16" style="border-left : none; border-right: none;"/>
        </tr>
        <tr class="text-center">
            <th rowspan="3">Date</th>
            <th colspan="14">Number of Students</th>
            <th rowspan="3">Grand Total</th>
        </tr>
        <tr class="text-center">
            <th colspan="7">Class A</th>
            <th colspan="7">Class B</th>
        </tr>
        <tr class="text-center">
            <th style="width:6.2%;">Eng</th>
            <th style="width:6.2%;">BM</th>
            <th style="width:6.2%;">Man</th>
            <th style="width:6.2%;">SC</th>
            <th style="width:6.2%;">PHY</th>
            <th style="width:6.2%;">CHE</th>
            <th style="width:6.2%;">Sum</th>
            <th style="width:6.2%;">Eng</th>
            <th style="width:6.2%;">BM</th>
            <th style="width:6.2%;">Man</th>
            <th style="width:6.2%;">SC</th>
            <th style="width:6.2%;">PHY</th>
            <th style="width:6.2%;">CHE</th>
            <th style="width:6.2%;">Sum</th>
        </tr>
    </thead>
...

A continuación se muestra mi js para mi exportación de PDF.

{
    action: function (e, dt, button, config) {
        showNotification('top', 'right', 'PDF exported sucessfully!');
        $.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, button, config); }, extend: 'pdf', className: 'btn-info btnspaces', text: 'Export to PDF', filename: 'Students', orientation: 'landscape', pageSize: 'LEGAL', customize: function (pdf) { var firstHeaderRow = []; var secondHeaderRow = []; //11 $('#dtBasicExample').find("thead>tr:nth-child(7)>th").each(
            function (index, element) {
            var colSpan = element.getAttribute("colspan");
            var rowSpan = element.getAttribute("rowspan");
            firstHeaderRow.push({
                text: element.innerHTML,
                style: "tableHeader",
                colSpan: colSpan,
                rowSpan: rowSpan
            });
            for (var i = 0; i < colSpan - 1; i++) {
                firstHeaderRow.push({});
            }
        });
        //10
        $('#dtBasicExample').find("thead>tr:nth-child(8)>th").each(
            function (index, element) {
            var colSpan = element.getAttribute("colspan");
            var rowSpan = element.getAttribute("rowspan");
            secondHeaderRow.push({
                text: element.innerHTML,
                style: "tableHeader",
                colSpan: colSpan,
                rowSpan: rowSpan
            });
            for (var i = 0; i < colSpan - 1; i++) {
                secondHeaderRow.push({});
            }
        });

        pdf.content[1].table.headerRows = 3;

        var objLayout = {};
        objLayout['hLineWidth'] = function (i) {
            return .5;
        };
        objLayout['vLineWidth'] = function (i) {
            return .5;
        };
        objLayout['hLineColor'] = function (i) {
            return 'black';
        };
        objLayout['vLineColor'] = function (i) {
            return 'black';
        };
        objLayout['paddingTop'] = function (i) {
            return 5;
        };
        objLayout['paddingBottom'] = function (i) {
            return 5;
        };
        objLayout['paddingLeft'] = function (i) {
            return 9;
        };
        objLayout['paddingRight'] = function (i) {
            return 9;
        };
        pdf.content[1].table.body.unshift(secondHeaderRow);
        pdf.content[1].table.body.unshift(firstHeaderRow);
        pdf.content[1].layout = objLayout;
    }

No tengo problemas para exportar esto a Excel, pero cuando intento exportarlo a PDF, aparece el error

fila de tabla con formato incorrecto no detectado una celda no está definida

Intenté eliminar el colspan y agregarlo manualmente <td></td>a las tablas hasta 16 columnas, funciona bien, pero la fecha y el total general están en la última columna en lugar de abarcar las 3 columnas.

Respuestas

1 samabcde Nov 10 2020 at 15:07

Para exportar el encabezado pdf con colSpan, y rowSpan, la celda vacía debe rellenarse para la celda cubierta por intervalo. El siguiente fragmento de código rellenará la base de la celda vacía en colSpany rowSpande la fila del encabezado (<th>).

Debido a Descargar en Iframes de espacio aislado (eliminado) , el botón en el fragmento de código no funcionará, puede copiar el siguiente código en un archivo html y abrir el archivo con un navegador para ver el efecto.