Datatables按钮合集——如何正确使用

Question

我正在尝试向我的数据表添加一个下拉菜单以显示如下按钮：

我的代码：

window.jQuery = window.$ = require("jquery");
    // boostrap
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

var datatableSettings = {
    select: {
      style: "multi",
      selector: "td:first-child",
    },
    dom: "Bfrtip",
    buttons: {
      buttons: [
        {
          extend: "collection",
          text: "Export",
          buttons: [
            { extend: "csv" },
            { extend: "excel" },
            {
              extend: "pdfHtml5",
              orientation: "landscape",
              pageSize: "A0",
              title: "Users List PDF",
              exportOptions: {
                modifier: {
                  page: "current",
...
  },

我的问题是显示了下拉菜单但它不起作用：当我单击“导出”以显示其中的按钮时我无法打开下拉菜单

Answer 1

您将需要指定 text 属性，而不需要指定 extend 属性，除非您希望在集合中包含下拉按钮。这对我有用：

          buttons: [
            {
              extend: "collection",
              text: "Export",
              buttons: [
                { text: "csv" },
                { text: "excel" },
                {
                  text: "pdf",
                  orientation: "landscape",
                  pageSize: "A0",
                  title: "Users List PDF",
                  exportOptions: {
                    modifier: {
                      page: "current",
                    },
                  },
                },
              ],

Fiddle: https://jsfiddle.net/r2c9s0o7/

Answer 2

这是使集合下拉列表正常工作的完整配置：

我正在使用 symfony webpack :

在 js 文件中：

import "./styles/datatables.scss";
const $ = require("jquery");
const routes = require("../public/js/fos_js_routes.json");
import Routing from "../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js";
require("@fortawesome/fontawesome-free/css/all.min.css");
require("@fortawesome/fontawesome-free/js/all.js");
Routing.setRoutingData(routes);

// this "modifies" the jquery module: adding behavior to it
// the bootstrap module doesn't export/return anything
require("bootstrap");
require("bootstrap/js/dist/tooltip");
window.jQuery = window.$ = require("jquery");
require("datatables.net");
require("datatables.net-dt");
require("datatables.net-bs5");
require("jszip");
require("pdfmake");
require("datatables.net-buttons-bs5");
require("datatables.net-buttons/js/buttons.colVis.js");
require("datatables.net-buttons/js/buttons.html5.js");
require("datatables.net-buttons/js/buttons.print.js");
require("datatables.net-scroller-bs5");
require("datatables.net-select-bs5");
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
$(document).ready(function () {
  var startupsDt = null;
  var managersDt = null;
  var promosDt = null;
  var domainsDt = null;
  var datatableSettings = {
    select: {
      style: "multi",
      selector: "td:first-child",
    },
    dom: "Bfrtip",
    buttons: {
      buttons: [
        {
          extend: "collection",
          text: "Export",
          buttons: [
            { extend: "csv" },
            { extend: "excel" },
            {
              extend: "pdfHtml5",
              orientation: "landscape",
              pageSize: "A0",
              title: "Users List PDF",
              exportOptions: {
                modifier: {
                  page: "current",
                },
              },
            },
          ],
        },
        /*   {
          extend: "copy",
          className: "btn btn-primary glyphicon glyphicon-duplicate",
        }, */
      ],
      // dom: {
      //   button: {
      //     tag: "button",
      //     className: "btn-primary mx-2 my-2 align-middle btn-sm ",
      //   },
      //   buttonLiner: {
      //     tag: "null",
      //   },
      // },
    },
    responsive: true,
    ordering: false,
    pageLength: 10,
    paginate: true,
    lengthChange: false,
    searching: false,
    processing: true,
    serverSide: true,
    bAutoWidth: false,
    sAjaxDataProp: "data",
    oLanguage: {
      sProcessing:
        '<div class="d-flex justify-content-center py-2"><i class="fa fa-spinner fa-2x" aria-hidden="true"></i></div>\n',
      sSearch: "Rechercher",
      sLengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
      sInfo:
        '<div class="alert alert-dark" role="alert"> Affichage des &eacute;lements <span class="badge badge-info"> _START_ </span> &agrave; <span class="badge badge-info"> _END_ </span> sur <span class="badge badge-info"> _TOTAL_ </span> &eacute;l&eacute;ments </div>',
      sInfoEmpty:
        "Affichage des &eacute;lements 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
      sInfoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
      sInfoPostFix: "",
      sLoadingRecords: '<i class="fa fa-spinner" aria-hidden="true"></i>\n',
      sZeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
      sEmptyTable: "Aucune donnée disponible dans le tableau",
      oPaginate: {
        sFirst: "Premier",
        sPrevious: "Pr&eacute;c&eacute;dent",
        sNext: "Suivant",
        sLast: "Dernier",
      },
      oAria: {
        sSortAscending: ": activer pour trier la colonne par ordre croissant",
        sSortDescending:
          ": activer pour trier la colonne par ordre décroissant",
      },
    },
    columns: null,
    ajax: null,
  };

在 sass 或 css 文件中不要忘记添加：

@import "~bootstrap/scss/bootstrap";
@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";

最后我得到了：

Datatables按钮合集——如何正确使用

Datatables Button Collection - How to Use Correctly

javascript

jquery

datatables

webpack