猿问

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

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

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

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

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

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

    • 按钮、HTML5 导出、JSZip、pdfmake

    • 打印视图

    • 响应式

    • 数据表

    • 样式框架:Bootstrap 4

    • 扩展

  2. 实例化 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',

            },


红糖糍粑
浏览 65回答 1
1回答

Helenr

您正在实例化 DataTables 两次,它只需要实例化一次将此代码添加到您的数据表函数中,它将允许您复制/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
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答