Symfony 5 + Webpack Encore + Datatables: кнопки не отображаются - PullRequest
Новая
       15

Symfony 5 + Webpack Encore + Datatables: кнопки не отображаются

2 голосов
/ 13 июля 2020

Это моя вторая неудачная попытка использовать библиотеку для экспорта простой таблицы в любой документ (Excel, PDF и т. Д. c.).

На этот раз я использую DataTables . Таблица отображается, и все в порядке, но не отображается кнопка для экспорта, копирования или чего-то еще.

As you can see there are no export buttons anywhere. There are also no warnings or errors in the developer console.

These are the steps I followed in order to use DataTables in my Symfony 5 project:

  1. Add the CDN links to the base template from the страница загрузки со следующими параметрами:

    • Структура стилей : Bootstrap 4
    • Пакеты :
      • Таблицы данных
    • Расширения :
      • Кнопки, HTML5 Экспорт, JSZip, pdfmake
      • Просмотр для печати
      • Адаптивный

  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',
            },
            {
                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, я попытался воспроизвести интерфейс во фрагменте: 

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>

Во фрагменте левая кнопка, которая расширяет информацию о столбце «Centro», отсутствует в моей таблице, как вы понимаете ...

Я изменил опцию DataTables ajax на data, чтобы «вызвать» какие-то поддельные данные (аналогичные моему серверу), чтобы провести тест.

Но в любом случае здесь нет кнопок экспорта тоже отображается. Что мне не хватает?

1 Ответ

1 голос
/ 13 июля 2020

Вы создаете экземпляр DataTables дважды, он должен быть создан только один раз

добавьте этот код в свою функцию datatables, он позволит вам скопировать / csv / pdf ... вот jsfiddle рабочего примера

...