带有 webpack 的数据表按钮不起作用答案

【问题标题】：datatables buttons with webpack not working带有 webpack 的数据表按钮不起作用
【发布时间】：2021-12-14 18:55:31
【问题描述】：

我已经安装了 webpacker datatables.net 和 datatables.net-bs4 以及按钮，但是当我在 application.js 中调用它时，javascript 工作正常，但样式无效

require("bootstrap");
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
require('datatables.net-responsive-bs4');
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-responsive-bs4';
import 'datatables.net-bs4';
import 'datatables.net-buttons-bs4';

其他样式工作正常，但我不能让数据表显示用于导出或分页的按钮。我还尝试从 datatable cdn 手动下载 bs4 css for datatables 并调用它，但没有帮助，表格仍然没有分页样式

我有什么遗漏吗？我在编译时没有看到任何错误，所以我没有看到可能的问题。

我的数据表代码已经过测试，并且在我不使用 webpacker 的其他项目上工作，所以我认为我在这方面遗漏了一些东西

$('#custom_list_details').DataTable({
    
    'order': [[1, 'asc']],
    "ajax": '/customlist/'+$custom_list_id+'.json',

    "processing": true,
    'dom': 'lfr<"pull-right"B>tip',
    'buttons': [
    {"extend" : 'copyHtml5',"text":"Copy","className": 'btn btn-default btn-xs'},
    {"extend" : 'excelHtml5',"text": "XLS","className": 'btn btn-default btn-xs'},
    {"extend" : 'csvHtml5',"text": "CSV","className": 'btn btn-default btn-xs'},

    {
      text: 'TXT',
      extend: 'csvHtml5',
      fieldSeparator: '\t',
      extension: '.txt',
      "className": 'btn btn-default btn-xs'
    }


    ],
   "columnDefs": [
   {
         'targets': 0,
         'checkboxes': {
            'selectRow': true
         }
      }
  ],
 "columns": $('#custom_list_details').data('columns'),
 'lengthMenu': [
 [10, 50,100, -1],
 [10, 50,100, "All"]
 ],

谢谢

【问题讨论】：

您的 DataTables 代码在哪里？您对 DataTable 使用什么 dom 样式？

标签： ruby-on-rails webpack bootstrap-4 datatables ruby-on-rails-6

【解决方案1】：

我创建了一个小提琴来使用虚拟 JSON 数据试用您的表格，它工作正常。您需要确保拥有以下 DT 脚本/样式表：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap4.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<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/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>

出于造型目的，我会尝试将您的按钮放在一个集合中。

这里是表初始化代码和小提琴：

var table= $('#custom_list_details').DataTable({
    data : data,
    'order': [[1, 'asc']],
/*     "ajax": '/customlist/'+$custom_list_id+'.json',
     */
    "processing": true,
    'dom': 'lfr<"pull-right"B>tip',
        buttons: [{
            extend: 'collection',
            className: "btn-light",
            text: 'Print Report',
            buttons: [{
                    extend: "excel",
                    className: "btn btn-default btn-xs"
                },
                {
                    extend: "copy",
                    className: "btn btn-default btn-xs"
                },
                {
                    extend: "csv",
                    className: "btn btn-default btn-xs"
                },
                    {
      text: 'TXT',
      extend: 'csvHtml5',
      fieldSeparator: '\t',
      extension: '.txt',
      "className": 'btn btn-default btn-xs'
    }
            ],
        }],
   "columnDefs": [
   {
         'targets': 0,
         'checkboxes': {
            'selectRow': true
         }
      }
  ],
 "columns": [
 {"data" : "column1"},
 {"data" : "column2"}
 ],
 'lengthMenu': [
 [10, 50,100, -1],
 [10, 50,100, "All"]
 ],
 });

这里是小提琴：https://jsfiddle.net/BeerusDev/2makn4hp/7/

【讨论】：