Datatables Button Collection - How to Use Correctly

user_12090310 0
Viewed 617

I'm trying to add a dropdown to my datatable to show buttons like this :

enter image description here

My code :

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",
...
  },

My problem is that the dropdown is shown but it doesn't work : i can't open the dropdown when i click on export to show the buttons inside

Dropdown Menu

webpack datatables jquery javascript
2 Answers

You will need to specify the text attribute and you do not need to specify the extend attribute, unless you want to have dropdown buttons in the collection. This worked for me:

          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/

user_4365600

This is a full configuration for making collection dropdown works :

I'm using symfony webpack :

In js file :

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,
  };

In the sass or css file don't forget to add :

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

Finally i got :

enter image description here

user_120903100
Related