Button styles are incorrect.

jbnv

Here's the HTML for the Copy button from the Button Styles: Bootstrap 5 page:

<button class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example" type="button"><span>Copy</span></button>

Here's the HTML I'm getting for my Copy button:

<button class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="employers_table" type="button"><span>Copy</span></button>

So clearly the problem is that I'm getting the dt-button class instead of the btn and btn-secondary classes. What's the problem and how do I resolve it?

kthorngren

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

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

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

Fixed the issue by removing DataTables(window, $); and buttons(window, $);.

allan

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