Not able to have more than one "Button Example"

[ipesanz]

Hi,

I'm trying to add the functionality of export (csv, Excel & PDF) to my application using your skeleton of DataTables

The trouble is because after copying twice the button example table on file: tables_dinamyc.html.twig it only shows buttons on first table.

Why? Which way is this functionality configured?

[Krzysztof Piasecki]

Why?

File web/assets/js/custom.min.js initializes buttons for the HTML element #datatable-buttons. Copying HTML constitutes two elements with the same id in a document tree.

Which way is this functionality configured?

Orginally initialization is done in a file named custom.js. Find a function init_DataTables() . Remember that this app uses minified version of this file -> custom.min.js

For example:

1. Copy the table and change the id to datatable-buttons2.
2. At end of the tables_dynamic... add script

<script>

      function init_DataTables2() {

          console.log('run_datatables');


          if( typeof ($.fn.DataTable) === 'undefined'){ return; }
          console.log('init_DataTables');

          var handleDataTableButtons = function() {

              if ($("#datatable-buttons2").length) {
                  $("#datatable-buttons2").DataTable({
                      dom: "Bfrtip",
                      buttons: [
                          {
                              extend: "copy",
                              className: "btn-sm"
                          },
                          {
                              extend: "csv",
                              className: "btn-sm"
                          },
                          {
                              extend: "excel",
                              className: "btn-sm"
                          },
                          {
                              extend: "pdfHtml5",
                              className: "btn-sm"
                          },
                          {
                              extend: "print",
                              className: "btn-sm"
                          },
                      ],
                      responsive: true
                  });
              }

          };

          TableManageButtons = function() {
              "use strict";
              return {
                  init: function() {
                      handleDataTableButtons();
                  }
              };
          }();



          TableManageButtons.init();

      };

      init_DataTables2();

  </script>

Done.

This is only example. In a real scenario you should add another table from template, change the id and makes initialization in your preferable way (file, etc.). Of course you should read more on DataTable library.

If it is clear then please close this thicket.

[Krzysztof Piasecki]

Closing as not directly related to this repository and no activity.