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

Question

这是我第二次尝试使用库将简单表格导出到任何类型的文档（Excel、PDF 等），但失败了。这次我使用DataTables。该表正在显示，一切似乎都很好，但没有显示用于导出、复制或任何内容的按钮。如您所见，任何地方都没有导出按钮。开发者控制台中也没有警告或错误。以下是我在 Symfony 5 项目中使用 DataTables 所遵循的步骤：使用以下选项将 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',            },            {                data: 'date',                title: 'Fecha',                defaultContent: 'N/A',            },

Answer 1

您正在实例化 DataTables 两次，它只需要实例化一次

将此代码添加到您的数据表函数中，它将允许您复制/csv/pdf ...

$('.table').DataTable({

    dom: 'B<"clear">lfrtip',

    buttons: {

        name: 'primary',

       buttons: [ 'copy', 'csv', 'excel', 'pdf' ]

        }}       

    ); 

这是一个工作示例的jsfiddle