DataTables: Uncaught TypeError: Cannot read property 'buttons' of undefined

DataTables: Uncaught TypeError: Cannot read property 'buttons' of undefined

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

我可以设置一个 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错误:

Uncaught TypeError: Cannot read property 'buttons' of undefined

我做错了什么?

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

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

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

// 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/ for examples of both approaches working