DataTables添加Excel导出按钮失败及表单失效问题求助

尝试多种按钮配置均不生效，已确认JS代码其他功能正常，相关配置示例：

buttons: [ {
    extend: 'excelHtml5',
    autoFilter: true,
    sheetName: 'Exported data'
} ]

buttons: [
    'excel'
]

buttons: [
    {
        extend: 'excel',
        text: 'Save current page',
        exportOptions: {
            modifier: {
                page: 'current'
            }
        }
    }
]

当前初始化代码：

$(document).ready(function () {
    $.noConflict();
    $('#myTable').DataTable({
        buttons: [{
            extend: 'excelHtml5',
            autoFilter: true,
            sheetName: 'Exported data'
        }],
        order: [[3, 'desc']],
}

解决办法 #

1. 修复语法错误：初始化代码末尾缺少闭合的});，完整代码需补充：

$(document).ready(function () {
    $.noConflict();
    $('#myTable').DataTable({
        buttons: [{
            extend: 'excelHtml5',
            autoFilter: true,
            sheetName: 'Exported data'
        }],
        order: [[3, 'desc']],
        dom: 'Bfrtip' // 必须添加该配置渲染按钮区域
    });
});

2. 确认引入必要扩展文件：Excel导出依赖Buttons扩展与JSZip库，需按顺序引入以下文件：
   • DataTables核心CSS
   • Buttons扩展CSS
   • DataTables核心JS
   • JSZip库
   • Buttons扩展JS
   • Buttons HTML5导出JS
3. 添加dom配置：dom: 'Bfrtip'定义表格布局，其中B代表按钮区域，无此配置按钮不会被渲染到页面。

表单原本可提交按钮值至指定视图，引入DataTables后失效，表单代码：

<table class="table table-striped table-hover text-center" id="myTable">
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>
    <tbody id="tbData">                            
         <form action="~/Home/ReadOption" method="post">
            <input hidden value="entrega" name="seleccion"/>
            @{
                string delivery = "";                                    
            }
                @foreach (var item in Model)
                {
                    if (entrega != item.DeliveryNumber)
                    {
                      <tr>
                          <td><button type="submit" class="btn btn-link" value="@item.NumeroEntrega"  name="identi">@item.DeliveryNumber</button></td>
                          <td>@item.TaskNumber</td>
                          <td>@item.RandomNumber</td>
                      </tr>
                    }

                    delivery = item.DeliveryNumber;
                }                                
       </form>
    </tbody>                    
</table>

解决办法 #

DataTables会重新渲染表格DOM结构，包裹在<tbody>内的表单会被破坏，导致提交事件失效，可通过以下方式修复：

1. 将表单移至每个<tr>内部：为每行提交按钮单独创建表单，避免DataTables渲染影响：

<tbody id="tbData">                            
    @{
        string delivery = "";                                    
    }
    @foreach (var item in Model)
    {
        if (entrega != item.DeliveryNumber)
        {
          <tr>
              <td>
                  <form action="~/Home/ReadOption" method="post">
                      <input hidden value="entrega" name="seleccion"/>
                      <button type="submit" class="btn btn-link" value="@item.NumeroEntrega"  name="identi">@item.DeliveryNumber</button>
                  </form>
              </td>
              <td>@item.TaskNumber</td>
              <td>@item.RandomNumber</td>
          </tr>
        }

        delivery = item.DeliveryNumber;
    }                                
</tbody>

2. 使用事件委托绑定提交事件：若不想修改表单结构，可通过jQuery事件委托绕过DataTables的事件拦截：

$(document).on('click', '#myTable .btn-link', function(e) {
    e.preventDefault();
    const form = $(this).closest('form');
    form.submit();
});

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