DataTables导出Excel时合并列及解决末列导出失败问题

问题说明 #

表格最后两列（Item和time）采用嵌套表格结构，使用DataTables导出至Excel时，这两列无法正常导出，其余列显示正常。需要实现将嵌套表格内的多行内容合并，并完成正常导出。

原表格结构 #

<table class="table table-bordered " id="example">
    <thead>
        <tr>
            <th>Branch ID</th>
            <th>Branch Name</th>
            <th>Date</th>
            <th>S.time</th>
            <th>E.time</th>
            <th>Lines</th>
            <th>
                <table>
                    <tr><th>Item</th></tr>
                </table>
            </th>
            <th>
                <table>
                    <tr><th>time</th></tr>
                </table>
            </th>
        </tr>
    </thead>       
    <tbody>
        <tr>
            <td>1</td>
            <td>HEAD OFFICE</td> 
            <td id="tdtdate1"><input type="date" name="tdate" id="tdate1" class="tdate" value="2023-09-08"></td> 
            <td class="td1"><input type="time" id="stime1" ></td>
            <td><input type="time" id="etime1"></td>
            <td><input type="number" name="number" id="number1" class="number" autocomplete="off" ></td>
            <td >
                <table><tr> <td> <input type="text" class="form-control item" id="item1"> </td></tr><tr> <td> <input type="text" class="form-control item" id="item1"> </td></tr><tr> <td> <input type="text" class="form-control item" id="item1"> </td></tr> </table></td>                               
            <td ><table> <tr><td> <input type="text" class="form-control time" id="time10"> </td></tr> <tr><td> <input type="text" class="form-control time" id="time11"> </td></tr> <tr><td> <input type="text" class="form-control time" id="time12"> </td></tr> </table></td>                                                   
        </tr>        
        <tr>
            <td>2</td>
            <td>ONLINE STORE</td> 
            <td id="tdtdate1"><input type="date" name="tdate" id="tdate1" class="tdate" value="2023-09-08"></td> 
            <td class="td1"><input type="time" id="stime1" ></td>
            <td><input type="time" id="etime1"></td>
            <td><input type="number" name="number" id="number1" class="number" autocomplete="off" ></td>
            <td >
                <table><tr> <td> <input type="text" class="form-control item" id="item1"> </td></tr><tr> <td> <input type="text" class="form-control item" id="item1"> </td></tr><tr> <td> <input type="text" class="form-control item" id="item1"> </td></tr> </table></td>                               
            <td ><table> <tr><td> <input type="text" class="form-control time" id="time10"> </td></tr> <tr><td> <input type="text" class="form-control time" id="time11"> </td></tr> <tr><td> <input type="text" class="form-control time" id="time12"> </td></tr> </table></td>                                                   
        </tr>                                       
    </tbody>
</table>

原DataTables配置 #

$(document).ready(function() {
    $('#example').DataTable( {
        info: false,
        ordering: false,
        paging: false,
        dom: 'Bfrtip',
        buttons: [
        {
          extend: 'excel',
          exportOptions: {
            format: {
              body: function ( inner, rowidx, colidx, node ) {
                if ($(node).children("input").length > 0) {
                  return $(node).children("input").first().val();
                } else {
                  return inner;
                }
              }
            }
          }
        }
      ]
    } );
} );

解决方案 #

核心修改点 #

1. 针对嵌套表格列，遍历其中所有input元素，收集值并以换行符分隔合并
2. 处理表头的嵌套表格，提取正确的表头文本
3. 保留原有的直接input元素取值逻辑

修改后的DataTables配置 #

$(document).ready(function() {
    $('#example').DataTable( {
        info: false,
        ordering: false,
        paging: false,
        dom: 'Bfrtip',
        buttons: [
        {
          extend: 'excel',
          exportOptions: {
            format: {
              // 处理表头
              header: function ( inner, colidx ) {
                const $header = $(inner);
                if ($header.find('table').length > 0) {
                  return $header.find('th').text().trim();
                }
                return inner.trim();
              },
              // 处理表体
              body: function ( inner, rowidx, colidx, node ) {
                const $node = $(node);
                // 优先处理直接包含input的单元格
                const directInput = $node.children("input").first();
                if (directInput.length > 0) {
                  return directInput.val();
                }
                // 处理嵌套表格内的input，收集所有值合并
                const nestedInputs = $node.find('table input');
                if (nestedInputs.length > 0) {
                  return nestedInputs.map(function() {
                    return $(this).val() || '';
                  }).get().join('\n');
                }
                // 其他情况返回原内容
                return inner.trim();
              }
            }
          }
        }
      ]
    } );
} );

说明 #

• 表头处理：提取嵌套表格内的表头文本，确保导出的Excel表头正确显示Item和time
• 表体处理：
  • 保留原有直接input单元格的取值逻辑
  • 嵌套表格单元格会收集所有input的值，用换行符连接，导出到Excel后会在同一个单元格内换行显示，实现内容合并效果
• 空值处理：input无值时返回空字符串，避免导出无效内容

内容的提问来源于stack exchange，提问作者atifrazzaqdashti