数据表：未捕获的类型错误：无法读取未定义的属性“按钮”

Posted 2023-05-07

【中文标题】数据表：未捕获的类型错误：无法读取未定义的属性“按钮”

【英文标题】：DataTables: Uncaught TypeError: Cannot read property 'buttons' of undefined

【发布时间】：2016-06-01 18:08:30

【问题描述】：

我在设置使用 Buttons 插件的自定义数据表时遇到问题。

我可以设置一个有效的 custom default dom 布局：

//vanilla dom (frtip...)
$.extend($.fn.dataTable.defaults, 
  dom: 'frtip'
);

但如果我尝试include the "B" character in the dom layout：

// Invoke Buttons plugin (Bfrtip...)
$.extend($.fn.dataTable.defaults, 
  dom: 'Bfrtip'
);

...然后运行dataTables，报这个javascript错误：

未捕获的类型错误：无法读取未定义的属性“按钮”

我做错了什么？

请see an example of this at https://jsfiddle.net/jhfrench/at83rcoL/

【参考方案1】：

我在起草这个问题时想通了。在这里分享来之不易的答案：

仅包含相关的 JS 资产（jquery.dataTables.min.js、dataTables.buttons.min.js 等）是不够的。您还必须通过使用 button 对象元素扩展默认值来调用 Buttons 插件：

// Invoke Buttons plugin (Bfrtip...)
$.extend($.fn.dataTable.defaults, 
    buttons: [ 'copy', 'csv', 'excel' ]
);

或者你可以在dataTable()初始化调用它：

$("#table2").DataTable(
  buttons: [
    'copy', 'excel', 'pdf'
  ]
);

请参阅https://jsfiddle.net/jhfrench/at83rcoL/8/ 以获取examples of both approaches working。

【讨论】：

dom 的大部分内置选项都可以关闭，dom 选项仍然可以提及它们并且不会崩溃。遗憾的是，对于按钮插件，如果您没有在给定的 DT 实例上使用按钮，则必须省略 B，或者确保如果 B 在 dom 中，则 buttons 在选项。这使得在站点范围内设置一个很好的默认 dom 值（包括 B）有问题，因为它假定每个实例都有按钮。下次我处理这个问题时，我将尝试设置默认值 buttons: false 或 buttons: [] 看看是否能解决问题。

实际上，我只是在上面的小提琴中快速尝试过 :) 果然，在小提琴的第一个示例（没有按钮的那个）中，如果您设置 dom: 'Bfrtip' 并提供 buttons: [] 它作品！ （buttons: false 抛出异常）