Cómo exportar múltiples encabezados de fila en tablas de datos jQuery?

datatables datatables-1.10

Question

Hola, estoy usando jQuery Datatables 1.10. Estoy intentando exportar varias filas de encabezado de Datatable pero no obtengo. Pero está exportando solo una segunda fila de encabezado. Estoy usando botones

  buttons: [{
                extend: ''excel'',
                header: true

            }, {
                extend: ''print'',
                header: true
            }
            ],

Mi mesa Estructura como

                        <table id="example" style="color: black;" class="display compact cell-border" cellspacing="0">
                            <thead>

                                <tr>
                                    <th rowspan="2">Sl.No</th>
                                    <th rowspan="2">Zone</th>
                                    <th colspan="2">Allotted</th>
                                    <th colspan="2">Vacant</th>
                                    <th colspan="2">Amenities</th>
                                    <th colspan="2">Total</th>
                                </tr>

                                <tr>
                                    <th>No Of Plots</th>
                                    <th>Area</th>
                                    <th>No Of Plots</th>
                                    <th>Area</th>
                                    <th>No Of Plots</th>
                                     <th>Area</th>
                                    <th>No Of Plots</th>
                                    <th>Area</th>

                                </tr>
                            </thead>
                        </table>

Answer 1

Es mejor verificar esta documentación de tablas de datos. Buscar a continuación URL Exportar múltiples encabezados de fila

Answer 2

La solución mencionada en el DataTable-forum no funciona para la última versión. Lo he adaptado de una manera que funciona para mí. Agregué una función local a buttons.html5.js:

var _fnGetHeaders = function(dt) {
    var thRows = $(dt.header()[0]).children();
    var numRows = thRows.length;
    var matrix = [];

    // Iterate over each row of the header and add information to matrix.
    for ( var rowIdx = 0;  rowIdx < numRows;  rowIdx++ ) {
        var $row = $(thRows[rowIdx]);

        // Iterate over actual columns specified in this row.
        var $ths = $row.children("th");
        for ( var colIdx = 0;  colIdx < $ths.length;  colIdx++ )
        {
            var $th = $($ths.get(colIdx));
            var colspan = $th.attr("colspan") || 1;
            var rowspan = $th.attr("rowspan") || 1;
            var colCount = 0;

            // ----- add this cell''s title to the matrix
            if (matrix[rowIdx] === undefined) {
                matrix[rowIdx] = [];  // create array for this row
            }
            // find 1st empty cell
            for ( var j = 0;  j < (matrix[rowIdx]).length;  j++, colCount++ ) {
                if ( matrix[rowIdx][j] === "PLACEHOLDER" ) {
                    break;
                }
            }
            var myColCount = colCount;
            matrix[rowIdx][colCount++] = $th.text();

            // ----- If title cell has colspan, add empty titles for extra cell width.
            for ( var j = 1;  j < colspan;  j++ ) {
                matrix[rowIdx][colCount++] = "";
            }

            // ----- If title cell has rowspan, add empty titles for extra cell height.
            for ( var i = 1;  i < rowspan;  i++ ) {
                var thisRow = rowIdx+i;
                if ( matrix[thisRow] === undefined ) {
                    matrix[thisRow] = [];
                }
                // First add placeholder text for any previous columns.                 
                for ( var j = (matrix[thisRow]).length;  j < myColCount;  j++ ) {
                    matrix[thisRow][j] = "PLACEHOLDER";
                }
                for ( var j = 0;  j < colspan;  j++ ) {  // and empty for my columns
                    matrix[thisRow][myColCount+j] = "";
                }
            }
        }
    }

    return matrix;
};

Luego cambié el código en DataTable.ext.buttons.excelHtml5 en el mismo archivo para:

    if ( config.header ) {
                /* ----- BEGIN changed Code ----- */ 
                var headerMatrix = _fnGetHeaders(dt);
                for ( var rowIdx = 0;  rowIdx < headerMatrix.length;  rowIdx++ ) {
                    addRow( headerMatrix[rowIdx], rowPos );
                }
                /* ----- OLD Code that is replaced: ----- */    
                //addRow( data.header, rowPos );
                /* ----- END changed Code ----- */  
                $(''row c'', rels).attr( ''s'', ''2'' ); // bold
    }

Answer 3

Respuesta de @ronnie https://.com/a/42535830/5835910 está funcionando. Para que funcione, descargue los archivos del constructor de descargas jquery datatable https://datatables.net/download/index .

Por favor, no use archivos de páginas de ejemplo.

Answer 4

Hola, quizás llegue un poco tarde, pero espero que mi respuesta pueda ayudar a otra persona. Exporté todas las filas usando una biblioteca adicional, en mi caso, table2excel. Acabo de copiar las filas del encabezado usando la función html () y obteniendo todas las filas con la función .DataTable () . El código se ve de la siguiente manera:

$("#exportExcel").click(function(){
    $(''<table>'')
    .append(
         $("#table1 thead").html()
     )
     .append(
        $("#table1").DataTable().$(''tr'').clone()
     )
     .table2excel({
        exclude: "",
        name: "casting",
        filename: "ExportedData.xls" 
     });
    });

Solucionó el problema en mi caso.