Symfony 5 + Webpack Encore + Datatables：未显示按钮
Posted
技术标签:
【中文标题】Symfony 5 + Webpack Encore + Datatables：未显示按钮【英文标题】：Symfony 5 + Webpack Encore + Datatables: buttons not being displayed 【发布时间】：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 更改为“调用”一些假数据（类似于我的服务器）以进行测试。
但无论如何，这里也没有显示导出按钮。我错过了什么？
【问题讨论】：
【参考方案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 - 但基本上，不再建议跳过该协议。以上是关于Symfony 5 + Webpack Encore + Datatables：未显示按钮的主要内容，如果未能解决你的问题，请参考以下文章
Sass 加载器无法使用 Encore webpack 和 Symfony 5 加载 url
尝试使用 yarn encore dev 命令时找不到命令“encore”
使用 TailwindCSS 和 Symfony Webpack Encore
Symfony 4 - Webpack-encore 使用 FosJsRouting ：路由未定义