Question

我在jquery数据表中有一个表。单元格显示部门的名字。当您将鼠标悬停在名称上时，部门位置会弹出一个工具提示。例如：

<TABLE aria-describedby="DataTables_Table_2_info" role="grid" id="DataTables_Table_2" class="table table-tools table-dynamic  table-[object Object] dataTable" style="">
            <thead>
            <TR role="row">
                <TH aria-label="Head 0: activate to sort column ascending" style="width: 0px;" colspan="1" rowspan="1" aria-controls="DataTables_Table_2" tabindex="0" class="sorting">DEPARTMENT
                </TH>
                <TH aria-label="Head 0: activate to sort column ascending" style="width: 0px;" colspan="1" rowspan="1" aria-controls="DataTables_Table_2" tabindex="0" class="sorting">DATE
                </TH>
            </tr>
            </thead>
            <tbody>
                <tr class="odd" role="row" >
                    <td class="sorting_1">
                        <font color="#000000" size="2.5em"><a href="#" class="tooltips"><u>Accounts Department<span class="tooltiptext">3rd Floor West Building</span></u></a></font>
                    </td>
                    <td class="sorting_1" align=center > 
                        <font color="green"> 0.00%</font>
                    </td>
                </tr>   
            </tbody>
        </table>

但是，当您使用Excel导出时，位置也会导出。所以最终的结果是：

会计部3楼西楼

但是，工具提示文字代码在同一个<td>中。有没有办法排除或隐藏这部分出口？例如，用<exclude>？

之类的代码包围代码

在浏览jquery.dataTables.min.js文件后，这是点击保存到Excel时执行的代码：

fnClick:function(e,t,s)
  {
   this.fnSetText(s,this.fnGetTableData(t))
  }
 }),
   xls:e.extend({},
   TableTools.buttonBase,
     {
     sAction:"flash_save",
     sCharSet:"utf16le",
     bBomInc:!0,
     sButtonClass:"DTTT_button_xls",
     sButtonText:"<i class='fa fa-file-excel-o'></i>"

非常感谢。

Answer 1

在数据表中添加另一列，其中包含要在导出中显示的单元格数据，即没有工具提示标记的数据。
隐藏您刚刚添加的列，以便在浏览器中显示
选择要导出为excel的列，确保排除包含工具提示标记的列，并包含仅包含没有工具提示标记的数据的UI隐藏列。

<强> HTML：

<table id="exampleTable">
    <thead>
        <tr role="row">
            <th aria-hidden="true">DEPARTMENT</th> <!-- Used in data export -->
            <th aria-label="Head 0: activate to sort column ascending" style="width: 0px;" colspan="1" rowspan="1" aria-controls="DataTables_Table_2" tabindex="0" class="sorting">DEPARTMENT
            </th> <!-- used in browser UI -->
            <th aria-label="Head 0: activate to sort column ascending" style="width: 0px;" colspan="1" rowspan="1" aria-controls="DataTables_Table_2" tabindex="0" class="sorting">DATE
            </th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>Accounts Department</td>
            <td><font color="#000000" size="2.5em"><a href="#" class="tooltips"><u>Accounts Department<span class="tooltiptext">3rd Floor West Building</span></u></a></font></td>
            <td>03/20/2018</td>
        </tr>
    </tbody>
</table>

<强> JS：

$('#reportTable').DataTable({
    columnDefs: [
        // hide the first column from browser display (starts at 0)
        {'targets':[0], 'visible':false, 'searchable':false}
    ],
    buttons: [
        // configure the export to excel button (export to csv is similar)
        {
            extend: 'excelHtml5',
            title: "Example Excel Export",
            exportOptions: {
                columns: [0,2] // include the UI hidden column 0 and date column 2 (excludes the UI visible department column 1)
            }
        }            
    ]
});

Answer 2

您需要选择要导出的列...如下所示：

$(document).ready(function() {
var oTable = $('#DataTables_Table_2').DataTable( {
        dom: 'Blfrtip',
        buttons: [
       {
           extend: 'csv',
           exportOptions: {
                columns: [1,2] //include the columns you want here. 1st column is 0
            }
       }           
    ]  
    } );
} );

数据表：导出为CSV时，隐藏单元格中的值，EXCEL

2 个答案: