Rails7 ImportMaps

Rails7 ImportMaps

rphiliprphilip Posts: 5Questions: 1Answers: 0

I followed the very useful discussion in this question and dataTables is working well :) . This is how I have setup the file where dataTables is imported:

import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery

import DataTable from "datatables.net-bs5"
import Buttons from 'datatables.net-buttons-bs5'
import 'jszip'
import 'pdfmake'
 
window.DataTable = DataTable();
Buttons();

However, I still cannot get the datatables.net-buttons-bs5 plugin to work. It seems like I must have something wrong with the syntax because although dataTables itself recognizes that jQuery is available, for some reason Buttons does not and the browser reports these errors:

Uncaught ReferenceError: jQuery is not defined
    at dataTables.buttons.min.js:5:283
    at dataTables.buttons.min.js:5:308
Uncaught ReferenceError: jQuery is not defined
    at buttons.bootstrap5.min.js:5:379
    at buttons.bootstrap5.min.js:5:404

Any suggestions would be so very, very greatly appreciated.

Answers

  • rphiliprphilip Posts: 5Questions: 1Answers: 0

    My apologies, the error message re. JQuery is not defined were due to an error in another file. Those messages are gone now, but the buttons are still not being rendered in the table. I understand that having a test case would be the best way to debug this, but if there is anything obviously wrong with my syntax of the import statements or calling the Buttons() initialization, it would be great. Otherwise, I'll try to build a stripped down testcase.

  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin

    Try:

    Buttons(window, jquery);
    

    That might resolve it. If it doesn't can you show me how you are initialising the DataTable. Then if there is nothing wrong with that, I'd need a test case.

    Thanks,
    Allan

  • rphiliprphilip Posts: 5Questions: 1Answers: 0

    Thanks Allan! Unfortunately, the buttons are still not rendered. Here's how I initialize the DataTable:

    $('#sensor_networks').DataTable({
      searchHighlight: true,
      paging:          false,
      buttons: [
        { extend: 'copy',
          text: 'Copy to Clipboard'
        },
        { extend: 'csv',
          text: 'Download Spreadsheet (csv)'
        }
      ]
    });
    
  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin

    You either need to:

    1. Use the dom option to have the Buttons display, as shown in this example, or
    2. Append the Buttons container to the document, which can be one of the easiest ways to work with the styling integration - e.g. as shown in this Bootstrap 5 example.

    Allan

  • rphiliprphilip Posts: 5Questions: 1Answers: 0

    Thank you, again! Unfortunately, the buttons are still not being rendered when I initialize with:

    $(document).on('turbo:load', function(e) {
      var sensor_networks_table = $('#sensor_networks').DataTable({
    
        searchHighlight: true,
        paging:          false,
        buttons: [
          { extend: 'copy',
            text: 'Copy to Clipboard'
          },
          { extend: 'csv',
            text: 'Download Spreadsheet (csv)'
          }
        ]
      });
    
      sensor_networks_table.buttons().container().appendTo( '#sensor_networks_wrapper .col-md-6:eq(0)' );
    
    });
    
  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin

    Can you give me a link to your page so I can take a look and see what is going wrong?

    Thanks,
    Allan

  • rphiliprphilip Posts: 5Questions: 1Answers: 0

    Working! Thank you Allan!
    Here's what we had to do to get DataTables with Plugins working on Rails7.0.4 using import maps (this repository has a working rails 7 example)

    # config/importmap.rb
    # Default, created by rails new.
    pin "application", preload: true
    pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
    pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
    pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
    pin_all_from "app/javascript/controllers", under: "controllers"
    
    # Bootstrap (and popper, used for bootstrap popups and popovers)
    pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.2/dist/js/bootstrap.esm.js"
    pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js" 
    
    # DataTables, Buttons Plugin, and jQuery
    pin "datatables.net"              , to: "https://cdn.datatables.net/1.13.1/js/jquery.dataTables.mjs"
    pin "datatables.net-bs5"          , to: "https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.mjs"
    pin "datatables.net-buttons"      , to: "https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.mjs"
    pin "datatables.net-buttons-bs5"  , to: "https://cdn.datatables.net/buttons/2.3.2/js/buttons.bootstrap5.mjs"
    pin "datatables.net-buttons-html5", to: "https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.mjs"
    pin "pdfmake"                     , to: "https://ga.jspm.io/npm:pdfmake@0.2.6/build/pdfmake.js"
    pin "pdfmake-fonts"               , to: "https://ga.jspm.io/npm:pdfmake@0.2.6/build/vfs_fonts.js"
    pin "jquery"                      , to: "https://ga.jspm.io/npm:jquery@3.6.1/dist/jquery.js"
    
    # Support libraries for DataTables/Plugins
    pin "jszip", to: "https://ga.jspm.io/npm:jszip@3.10.1/lib/index.js"
    pin "buffer", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/buffer.js"
    pin "core-util-is", to: "https://ga.jspm.io/npm:core-util-is@1.0.3/lib/util.js"
    pin "events", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/events.js"
    pin "immediate", to: "https://ga.jspm.io/npm:immediate@3.0.6/lib/browser.js"
    pin "inherits", to: "https://ga.jspm.io/npm:inherits@2.0.4/inherits_browser.js"
    pin "isarray", to: "https://ga.jspm.io/npm:isarray@1.0.0/index.js"
    pin "lie", to: "https://ga.jspm.io/npm:lie@3.3.0/lib/browser.js"
    pin "pako", to: "https://ga.jspm.io/npm:pako@1.0.11/index.js"
    pin "process", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/process-production.js"
    pin "process-nextick-args", to: "https://ga.jspm.io/npm:process-nextick-args@2.0.1/index.js"
    pin "readable-stream", to: "https://ga.jspm.io/npm:readable-stream@2.3.7/readable-browser.js"
    pin "readable-stream/lib/internal/streams/stream.js", to: "https://ga.jspm.io/npm:readable-stream@2.3.7/lib/internal/streams/stream-browser.js"
    pin "safe-buffer", to: "https://ga.jspm.io/npm:safe-buffer@5.1.2/index.js"
    pin "setimmediate", to: "https://ga.jspm.io/npm:setimmediate@1.0.5/setImmediate.js"
    pin "string_decoder", to: "https://ga.jspm.io/npm:string_decoder@1.1.1/lib/string_decoder.js"
    pin "util", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/util.js"
    pin "util-deprecate", to: "https://ga.jspm.io/npm:util-deprecate@1.0.2/browser.js"
    
    # To pickup my custom javascript files
    pin_all_from "app/javascript/custom", under: "custom"
    
    # Gemfile
    source 'https://rubygems.org'
    git_source(:github) { |repo| 'https://github.com/#{repo}.git' }
    
    ruby '2.7.4'
    gem 'rails', '~> 7.0.4'
    ...
    # Use Sass to process CSS
    gem 'sassc-rails'
    
    #Use Bootstrap gem to pickup CSS
    gem 'bootstrap'    , '~> 5.2.2'   # https://blog.eq8.eu/til/how-to-use-bootstrap-5-in-rails-7.html
    ...
    
    
    // app/assets/stylesheets/apllication.scss (note the .SCSS instead of .CSS file type)
    @import "bootstrap";
    
    // app/javascript/application.js
    import "@hotwired/turbo-rails"
    import "controllers"
    
    import "bootstrap"
    import "custom/init_datatables"
    
    // app/javascript/custom/init_datatables.js
    import $ from 'jquery'
    import DataTable from 'datatables.net-bs5'
    import 'datatables.net-buttons-bs5'
    import 'datatables.net-buttons-html5'
    import 'jquery-highlight'
    import JSZip from 'jszip'
    import pdfMake from 'pdfmake'
    import pdfFonts from 'pdfmake-fonts'
    
    DataTable.Buttons.jszip(JSZip)
    DataTable.Buttons.pdfMake(pdfMake)
    pdfMake.vfs = pdfFonts.pdfMake.vfs
    
    $(document).on('turbo:load', function(e) {
    
      var my_table = $('#my_table').DataTable({
        destroy: true,
        paging:          false,
        buttons: [
          { extend: 'copy',
            text: 'Copy to Clipboard'
          },
          { extend: 'csv',
            text: 'Download Spreadsheet (csv)'
          }
        ]
      });
    
      my_table.buttons().container().appendTo( '#my_table_wrapper .col-md-6:eq(0)' );
    });
    
Sign In or Register to comment.