Datatables - Export to Excel

Question

I have a table that, after being loaded, each row has a button to show details (icon +) as shown in the image below:

Clicking on this button opens a new table below that can be collected later. The problem is at the time of export to Excel. The table comes out all messed up, like this:

This is my listing JSP:

<table id="roomListReportTable">
        <thead>
            <tr>
                <th class="title unsortable" style="width: 2%;"></th>
                <th class="title" style="background-color: #000000; color: #ffffff;">Data de Início</th>
                <th class="title" style="background-color: #000000; color: #ffffff;">Evento</th>
                <th class="title" style="background-color: #000000; color: #ffffff;">Quartos Vendidos</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${salesList}" var="sales">
                <tr>
                    <td class="showDetails">
                        <img class="showButton toggleDetails" src="${rootPath}/img/bt_add.png" alt="Ver reservas" title="Ver reservas" />
                        <img class="hideButton toggleDetails" src="${rootPath}/img/bt_sub.png" alt="Esconder reservas" title="Esconder reservas" />
                        <img class="loadingButton" src="${rootPath}/img/loading.gif" alt="Carregando" title="Carregando" />
                        <input type="hidden" class="eventId" value="${sales.event.id}">
                    </td>
                    <td class="center"><fmt:formatDate value="${sales.event.startDate}"/></td>
                    <td class="center">${sales.event.shortName}</td>
                    <td class="center">${sales.qty}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

And this is the datatable I’m using:

function applyReportDataTables(table) {
    oReportTable = $(table).dataTable({
        "aoColumnDefs": [
            {"bSortable": false, "aTargets": ["unsortable"]},
            {"sType": "pt-br-date", "aTargets": ["date"]}
        ],
        "aaSorting": [],
        "sDom": "T<'clear'>lfrtip",
        "oTableTools": {
            "aButtons": ["xls"],
            "sSwfPath": $("#rootPath").val() + "/media/swf/copy_cvs_xls_pdf.swf"
        },      
        "sPaginationType": "full_numbers",
        "bStateSave": false,
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
        "paging": false,
        "oLanguage": {
            "oPaginate": {
                "sFirst": "Primeira",
                "sLast": "Última",
                "sPrevious": "Anterior",
                "sNext": "Próxima"
            },
            "sSearch": "Busca",
            "sInfo": "Mostrando de _START_ à _END_ de _TOTAL_ registros",
            "sInfoEmpty": "Nenhum resultado",
            "sInfoFiltered": " - filtrados de um total de _MAX_ registros",
            "sLengthMenu": "Mostrando _MENU_ registros",
            "sLoadingRecords": "Por favor - espere...",
            "sProcessing": "Carregando...",
            "sZeroRecords": "Nenhum resultado foi encontrado com esses filtros!"
        }
    });
    return oReportTable;
}

I could, before export, remove those columns that have the button ?

I imagine that without them the excel would leave normally.

Answer 1

I was able to solve the problem by removing the "alt" from the list. It somehow defaced the entire page and broke the export.