jQuery DataTable导出按钮无法工作 控制台报mData读取错误

你遇到的Cannot read properties of undefined (reading 'mData')报错和导出按钮本身没关系，是DataTable初始化失败导致的，核心原因有两个：

1. 列数不匹配：你初始化时写的columns配置只有5个字段，但HTML表格的<thead>里定义了6个<th>表头，DataTable按表头数量匹配列配置时找不到对应项，直接抛出mData读取错误，整个表格实例初始化失败，配置的导出按钮自然无法正常工作。
2. 数据源冲突：你HTML的<tbody>里已经写了静态示例数据，初始化时又传入了data: response.data指定用AJAX返回的动态数据渲染，两个数据源同时存在会引发解析冲突。
   另外你的样式文件存在重复引入：datatables.min.css已经包含了DataTable核心样式，不需要再额外引入jquery.dataTables.min.css，重复加载可能引发样式异常。

按以下步骤调整即可：

• 统一列配置与表头
  如果你要使用AJAX返回的动态数据：
  1. 将<thead>里的表头数量调整为和columns配置一致的5个，对应字段名即可，示例：

  <thead>
    <tr>
        <th>ID</th>
        <th>描述</th>
        <th>日期</th>
        <th>类型</th>
        <th>状态</th>
    </tr>
  </thead>
  

  2. 把<tbody>里的静态示例行全部删除，只保留空的<tbody></tbody>标签即可，DataTable会自动填充动态返回的数据。
     如果你要使用HTML里写死的静态数据：直接删掉初始化配置里的data: response.data和columns数组，DataTable会自动读取DOM里的表头和表格内容完成渲染。
• 清理重复资源
  删掉重复引入的jquery.dataTables.min.css，CSS部分只保留两个文件即可：

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/datatables.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css" />
  

  你引入的JS资源顺序是正确的，不需要调整：jQuery在前，之后是DataTable核心、Buttons插件，再加上JSZip、pdfmake等导出依赖，最后是html5导出、打印按钮的对应插件，这部分配置没问题。
• 放开AJAX配置
  你现在AJAX的请求类型、地址、数据类型都被注释了，实际运行时记得取消注释，确保接口返回的response.data是标准数组，且数组每一项的字段名和columns里配置的Id/description/Date/type/status完全对应，避免出现单元格内容为空的问题。

以上调整完成后，你配置的dom: 'Bfrtip'和导出按钮数组就能正常生效，表格初始化成功后复制、导出CSV/Excel/PDF、打印功能都可以正常使用。

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