Symfony 5 + Webpack Encore + Datatables: ปุ่มไม่แสดง

นี่เป็นความพยายามครั้งที่สองของฉันที่ล้มเหลวในการใช้ไลบรารีเพื่อส่งออกตารางธรรมดาไปยังเอกสารประเภทใดก็ได้ (Excel, PDF ฯลฯ )

เวลานี้ผมกำลังใช้DataTables ตารางกำลังแสดงและทุกอย่างดูเหมือนจะดี แต่ไม่มีปุ่มสำหรับส่งออกคัดลอกหรืออะไรเลย

อย่างที่คุณเห็นไม่มีปุ่มส่งออกที่ใดก็ได้ นอกจากนี้ยังไม่มีคำเตือนหรือข้อผิดพลาดในคอนโซลนักพัฒนาซอฟต์แวร์

นี่คือขั้นตอนที่ฉันทำตามเพื่อใช้ DataTables ในโครงการ Symfony 5 ของฉัน:

1. เพิ่มลิงก์ CDN ไปยังเทมเพลตพื้นฐานจากหน้าดาวน์โหลดพร้อมตัวเลือกต่อไปนี้:

   • กรอบการจัดแต่งทรงผม : Bootstrap 4
   • แพ็คเกจ :
     • ตารางข้อมูล
   • ส่วนขยาย :
     • ปุ่ม HTML5 ส่งออก JSZip pdfmake
     • มุมมองการพิมพ์
     • ตอบสนอง

2. สร้างอินสแตนซ์ DataTable เพื่อสร้างตาราง นี่คือลักษณะของ JS สุดท้ายในคอนโซลนักพัฒนาซอฟต์แวร์:

$(document).ready(function() { $('.table').DataTable({
        ajax: {
            url: "/https/isolution.pro/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: "/https/isolution.pro/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การ "เรียกว่า" ข้อมูลปลอมบาง (คล้ายกับเซิร์ฟเวอร์ของฉัน) เพื่อที่จะทำให้การทดสอบ

แต่อย่างไรก็ตามที่นี่ปุ่มส่งออกจะไม่แสดงเช่นกัน ฉันขาดอะไรไป?

คุณกำลังสร้างอินสแตนซ์ DataTables สองครั้งโดยจะต้องสร้างอินสแตนซ์เพียงครั้งเดียว

เพิ่มรหัสนี้ในฟังก์ชั่น datatables ของคุณซึ่งจะช่วยให้คุณสามารถคัดลอก / csv / pdf ...

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

นี่คือjsfiddleของตัวอย่างการทำงาน