Answers

• kthorngren Posts: 20,269Questions: 26Answers: 4,765

  November 2022

  Sounds like you need to use the Download Builder to get the correct style integration files for Bootstrap 5.

  If this doesn't help please post a link to your page or a test case replciating the issue so we can help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• jbnv Posts: 9Questions: 4Answers: 1

  November 2022

  I did in fact use the Download Builder to get the links to the style integration files. Here are the ones specificly for DataTables currently in my project:

  https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css
  https://cdn.datatables.net/buttons/2.3.2/css/buttons.bootstrap5.min.css
  https://cdn.datatables.net/fixedheader/3.2.4/css/fixedHeader.bootstrap5.min.css
  https://cdn.datatables.net/searchpanes/2.0.2/css/searchPanes.bootstrap5.min.css
  https://cdn.datatables.net/select/1.4.0/css/select.bootstrap5.min.css
  https://cdn.datatables.net/staterestore/1.1.1/css/stateRestore.bootstrap5.min.css

  As for a live test case, I'll have to see what I can put together. The project itself is not accessible to the public.
• jbnv Posts: 9Questions: 4Answers: 1

  November 2022

  Update:

  Here are the dependencies in my package.json:

      "dependencies": {
          "@fortawesome/fontawesome-free": "^6.1.2",
          "datatables.net": "^1.13.1",
          "datatables.net-bs5": "^1.13.1",
          "datatables.net-buttons": "^2.3.3",
          "datatables.net-buttons-bs5": "^2.3.3",
          "datatables.net-staterestore-dt": "^1.1.1",
          "jszip": "^3.10.1",
          "pdfmake": "^0.2.6",
          "sweetalert2": "^11.6.5"
      }
  

  My JavaScript file looks like this:

  import $ from "jquery";
  import DataTables from "datatables.net-bs5";
  import Swal from "sweetalert2";
  import jszip from 'jszip';
  import pdfmake from "pdfmake";
  import buttons from 'datatables.net-buttons-bs5';
  import colVis from 'datatables.net-buttons/js/buttons.colVis.js' ;
  import html5Buttons from "datatables.net-buttons/js/buttons.html5.js";
  
  // Wire DataTables and its components to the window and to jQuery.
  DataTables(window, $);
  buttons(window, $);
  colVis(window, $);
  html5Buttons(window, $,jszip,pdfmake);
  
  // everything after here wires my data tables.
  

  I'm getting this error in the console:

  jquery.dataTables.mjs:59 Uncaught TypeError: Cannot set properties of undefined (setting '$')
      at DataTable (jquery.dataTables.mjs:59:7)
      at datatables.js:18:1
  

  The error occurs here:

  var DataTable = function ( selector, options )
  {
  // ...
  this.$ = function ( sSelector, oOpts )
      {
          return this.api(true).$( sSelector, oOpts );
      };  
  // ...
  
• jbnv Posts: 9Questions: 4Answers: 1

  November 2022

  Fixed the issue by removing DataTables(window, $); and buttons(window, $);.
• allan Posts: 61,650Questions: 1Answers: 10,094 Site admin

  November 2022

  Sounds like you might be using Vite, ESBuilder or similar for your Javascript bundle. This part of the 1.13 release blog post explains why you might be finding a change.

  I'm going to get the docs updated for that very shortly.

  Allan