Nested datatables not being exported into Excel and PDF

databody

I am using nested tables as shown in example below. The nesting part of table is working fine and it displays correctly. Problem is when I export to Excel or PDF then it only shows main table and not nested table. How can I also show nested table in Excel and PDF?

MY HTML

<table id="exampleTable">
                        <thead>
                            <tr>
                                <th>Year</th>
                                <th>Month</th>
                                <th>Savings</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2012</td>
                                <td>January</td>
                                <td>$100</td>
                            </tr>
                            <tr>
                                <td>2012</td>
                                <td>February</td>
                                <td>$80</td>
                            </tr>
                        </tbody>
                    </table>

                    <table id="hiddenTable" style="display:none">
                        <thead>
                            <tr>
                                <th>Year1</th>
                                <th>Month1</th>
                                <th>Savings1</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2023</td>
                                <td>Jan</td>
                                <td>88</td>
                            </tr>
                            <tr>
                                <td>2024</td>
                                <td>Feb</td>
                                <td>99</td>
                            </tr>
                        </tbody>
                    </table>

MY JAVASCRIPT

    <script language="javascript">

            function fnFormatDetails(table_id, html) {
                var sOut = "<table id=\"exampleTable_" + table_id + "\">";
                sOut += html;
                sOut += "</table>";
                return sOut;
            }


            window.addEventListener('load', function () {

                var iTableCounter = 1;
                var oTable;
                var oInnerTable;
                var TableHtml;

                //Run On HTML Build
                if (window.jQuery) {
                    TableHtml = $("#hiddenTable").html();

                    //console.log(TableHtml);
                    //Insert a 'details' column to the table
                    var nCloneTh = document.createElement('th');
                    var nCloneTd = document.createElement('td');
                    nCloneTd.innerHTML = '<img src="/Assets/img/details_open.png">';
                    nCloneTd.className = "center";

                    $('#exampleTable thead tr').each(function () {
                        this.insertBefore(nCloneTh, this.childNodes[0]);
                    });

                    $('#exampleTable tbody tr').each(function () {
                        this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
                    });

                    //Initialse DataTables, with no sorting on the 'details' column
                    var oTable = $('#exampleTable').dataTable({
                        "bJQueryUI": true,
                        "dom": "lBfrtip",
                        "sPaginationType": "full_numbers",
                        "aoColumnDefs": [
                        { "bSortable": false, "aTargets": [0] }
                        ],
                        "aaSorting": [[1, 'asc']],
                        "buttons": [
                {
                    extend: 'copy',
                },
                {
                    extend: 'csv',
                },
                {
                    extend: 'excel',
                    orientation: 'landscape',
                },
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                },
                {
                    extend: 'print',
                    orientation: 'landscape',
                },

                        ],
                    });

                    /* Add event listener for opening and closing details
                    * Note that the indicator for showing which row is open is not controlled by DataTables,
                    * rather it is done here
                    */
                    $('#exampleTable tbody td img').on('click', function () {
                        var nTr = $(this).parents('tr')[0];
                        if (oTable.fnIsOpen(nTr)) {
                            /* This row is already open - close it */
                            this.src = "/Assets/img/details_open.png";
                            oTable.fnClose(nTr);
                        }
                        else {
                            /* Open this row */
                            this.src = "/Assets/img/details_close.png";
                            oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');
                            oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                                "bJQueryUI": false,
                                //"sPaginationType": "full_numbers"
                                "searching": false,
                                "paging": false,
                            });
                            iTableCounter = iTableCounter + 1;
                        }
                    });


                }

            });
        </script>

colin

The export does only work on the data in the table itself. You didn't post fnOpen(), so I can't see what it's doing there, but there are a few forum threads (such as here, here and here) which explains how you can fudge child rows to be exported.

Colin