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

【问题标题】：Symfony 5 + Webpack Encore + Datatables: buttons not being displayedSymfony 5 + Webpack Encore + Datatables：未显示按钮
【发布时间】：2020-11-02 03:58:24
【问题描述】：

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

这次我使用DataTables。表格正在显示，一切正常，但没有显示导出、复制或其他任何按钮。

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

这些是我在 Symfony 5 项目中使用 DataTables 所遵循的步骤：

使用以下选项将 CDN 链接从 download page 添加到基本模板：
- 样式框架：Bootstrap 4
- 包：
  - 数据表
- 扩展：
  - 按钮、HTML5 导出、JSZip、pdfmake
  - 打印视图
  - 响应式
实例化 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',
            },
            {
                data: 'ref',
                title: 'Documento de referencia',
                defaultContent: 'N/A',
            },
            {
                data: 'status',
                title: 'Estado',
                defaultContent: 'N/A',
            },
            {
                data: 'os',
                title: 'Sistema Operativo',
                defaultContent: 'N/A',
            },
            {
                data: 'cpu',
                title: 'Procesador',
                defaultContent: 'N/A',
            },
            {
                data: 'type',
                title: 'Tipo de procesador',
                defaultContent: 'N/A',
            },
            {
                data: 'hdd',
                title: 'Disco duro',
                defaultContent: 'N/A',
            },
            {
                data: 'ram',
                title: 'Memoria RAM',
                defaultContent: 'N/A',
            }
        ],
        responsive: true,
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
        },
    })
})

这就是我的 Twig 表格基本模板的样子：

{% extends 'base.html.twig' %}

{% set bodyTitle %}
    {% block setBodyTitle %}{% endblock %}
{% endset %}

{% block title %}
    {{ parent() }} | {{ bodyTitle }}
{% endblock %}

{% block body %}
    <div class="container{% block fluid%}{% endblock%} mt-3">
        <div class="row">
            <div class="col">
                <h1>{{ bodyTitle }} <a class="btn btn-outline-success" href="{% block bodyCreateUrl %}{% endblock %}">➕</a></h1>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <table class="table"></table>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/b-html5-1.6.2/b-print-1.6.2/cr-1.5.2/r-2.2.5/datatables.min.css"/>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/b-html5-1.6.2/b-print-1.6.2/sp-1.1.1/datatables.min.js"></script>


    <script>
        $(document).ready(function() {
            $('.table').DataTable({
                ajax: {
                    url: "/api/{% block jsApi %}{% endblock %}.json",
                    dataSrc: ''
                },
                buttons: [ 'excel' ],
                columns: [{% block jsTableColumns %}{% endblock %}],
                responsive: true,
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
                },
            })
        })
    </script>
{% endblock %}

尽管我所做的一切都是在我的 Symfony 项目中，但我试图在 sn-p 上复制前端：

var fakeApiData = [{
    id: 1,
    program: {
        id: 1,
        name: 'Some place'
    },
    description: 'fgdfg',
    comment: 'dfgdfg',
    item_condition: 'New',
    location: {
        id: 2,
        name: 'Some place'
    },
    fund_source: {
        id: 1,
        name: 'Donation'
    },
    age: '1',
    purchase_price: 1200,
    purchase_currency: 'US$',
    physical_location: 'Somewhere',
    date: '2020-07-05T00:00:00+02:00',
    status: 'ok',
    os: 'Windows 10',
    ram: 4,
    cpu: 'I3 3.2GHz',
    type: 'x64',
    hdd: '320',
    center: {
        id: 1,
        name: 'Some place'
    }
}];

$(document).ready(function() {
    $('.table').DataTable({
        data: fakeApiData,
        buttons: ['excel', 'copy' ],
        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',
            },
            {
                data: 'ref',
                title: 'Documento de referencia',
                defaultContent: 'N/A',
            },
            {
                data: 'status',
                title: 'Estado',
                defaultContent: 'N/A',
            },
            {
                data: 'os',
                title: 'Sistema Operativo',
                defaultContent: 'N/A',
            },
            {
                data: 'cpu',
                title: 'Procesador',
                defaultContent: 'N/A',
            },
            {
                data: 'type',
                title: 'Tipo de procesador',
                defaultContent: 'N/A',
            },
            {
                data: 'hdd',
                title: 'Disco duro',
                defaultContent: 'N/A',
            },
            {
                data: 'ram',
                title: 'Memoria RAM',
                defaultContent: 'N/A',
            }
        ],
        responsive: true,
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
        },
    })
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-html5-1.6.2/b-print-1.6.2/r-2.2.5/datatables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-html5-1.6.2/b-print-1.6.2/r-2.2.5/datatables.min.js"></script>

<div class="row">
    <div class="col">
        <table class="table"></table>
    </div>
</div>

在 sn-p 中，展开有关“Centro”列的信息的左侧按钮不在我的表格中，您可以欣赏...

我已将 data 的 DataTables 选项 ajax 更改为“调用”一些假数据（类似于我的服务器）以进行测试。

但无论如何，这里也没有显示导出按钮。我错过了什么？

【问题讨论】：

标签： javascript php jquery symfony datatables

【解决方案1】：

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

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

$('.table').DataTable({
    dom: 'B<"clear">lfrtip',
    buttons: {
        name: 'primary',
       buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
        }}       
    );

这是一个工作示例的jsfiddle

【讨论】：

嗯，dom: 'B<"clear">lfrtip', 工作得很好。谢谢。
@Maramal - 供参考：请参阅 here 以了解 dom 选项的说明。 B 用于“按钮初始化”。
@Maramal - 另外，我建议您更改语言 URL，使其包含协议：https:。有关这方面的更多信息，请参阅 this article - 但基本上，不再建议跳过该协议。