Symfony 5 + Webpack Encore + Datatables：按钮未显示

Question

这是我第二次尝试使用库将简单表格导出到任何类型的文档（Excel、PDF 等），但失败了。

这次我使用DataTables。该表正在显示，一切看起来都很好，但没有显示导出、复制或任何内容的按钮。

如您所见，任何地方都没有导出按钮。开发者控制台中也没有警告或错误。

以下是我在 Symfony 5 项目中使用 DataTables 时遵循的步骤：

1. 使用以下选项将 CDN 链接从下载页面添加到基本模板：

• 按钮、HTML5 导出、JSZip、pdfmake

• 打印视图

• 反应灵敏

• 数据表

• 样式框架：Bootstrap 4

• 套餐：

• 扩展：

• 实例化 DataTable 以创建表。最终的 JS 在开发者控制台中如下所示：

$(document).ready(function() {

    $('.table').DataTable({

        ajax: {

            url: "/api/inventory_items.json",

            dataSrc: ''

        },

        buttons: ['excel'],

        columns: [{

                data: 'center.name',

                title: 'Centro',

                defaultContent: 'N/A',

            },

            {

                data: 'program.name',

                title: 'Programa',

                defaultContent: 'N/A',

            },

            {

                data: 'description',

                title: 'Descripción',

                defaultContent: 'N/A',

            },

            {

                data: 'comment',

                title: 'Comentario',

                defaultContent: 'N/A',

            },

            {

                data: 'item_condition',

                title: 'Condición',

                defaultContent: 'N/A',

            },

            {

                data: 'age',

                title: 'Antigüedad',

                defaultContent: 'N/A',

            },

            {

                data: 'purchase_price',

                title: 'Precio de compra',

                defaultContent: 'N/A',

            },

            {

                data: 'purchase_currency',

                title: 'Moneda de compra',

                defaultContent: 'N/A',

            },

            {

                data: 'sn',

                title: 'S/N',

                defaultContent: 'N/A',

            },

            {

                data: 'physical_location',

                title: 'Ubicación Física',

                defaultContent: 'N/A',

            },

Answer 1

您实例化 DataTable 两次，只需实例化一次将此代码添加到您的数据表函数中，它将允许您复制/csv/pdf...$('.table').DataTable({&nbsp; &nbsp; dom: 'B<"clear">lfrtip',&nbsp; &nbsp; buttons: {&nbsp; &nbsp; &nbsp; &nbsp; name: 'primary',&nbsp; &nbsp; &nbsp; &nbsp;buttons: [ 'copy', 'csv', 'excel', 'pdf' ]&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; );&nbsp;这是一个工作示例的jsfiddle