Trouble loading DataTable vanilla with Vite

Trouble loading DataTable vanilla with Vite

argonzalez2017argonzalez2017 Posts: 4Questions: 1Answers: 0

Code:
import * as DataTable from 'datatables.net';

    console.log($);

    new DataTable($element, {});

Error messages shown:
ƒ (selector, context) {
return new jQuery.fn.init(selector, context);
}
jquery.dataTables.js:4559 Uncaught TypeError: $ is not a function
at jquery.dataTables.js:4559:21
at new module.exports (jquery.dataTables.js:50:11)
at of-datatable.js?t=1658675799322:10:1
(anonymous) @ jquery.dataTables.js:4559
module.exports @ jquery.dataTables.js:50
(anonymous) @ of-datatable.js?t=1658675799322:10
module.esm.js:416

Description of problem:
I can't get datatables vanilla to work at all with Vite. jQuery works with every other module on my site.

Answers

  • kthorngrenkthorngren Posts: 16,773Questions: 25Answers: 3,971

    I can't get datatables vanilla to work

    When you say Datatables Vanilla are you referring to this library?
    https://github.com/Mobius1/Vanilla-DataTables

    It states in the readme that it is no longer maintained and to use this library:
    https://github.com/fiduswriter/Simple-DataTables

    In either case these are maintained by third party developers. You need to contact the library developer for help. If you are using standard Datatables provided by this site then please post a link to your page or a test case replicating the issue so we can take a look.
    https://datatables.net/manual/tech-notes/#Technical-notes

    Kevin

  • argonzalez2017argonzalez2017 Posts: 4Questions: 1Answers: 0

    I am referring to this library. According to the documents, the vanilla way to load DataTable is via "new DataTable(element, options)". When I do this with Vite, i am recieving this error.

  • tangerinetangerine Posts: 3,235Questions: 30Answers: 380

    I am referring to this library.

    What library?

    According to the documents,

    What documents?

    Please be more precise.

    As Kevin already told you, the libraries you linked to are not jQuery DataTables.

  • argonzalez2017argonzalez2017 Posts: 4Questions: 1Answers: 0

    THIS library.

    Non-jQuery initialisation
    If you prefer writing Javascript without using the abstractions jQuery provides, you can initialise DataTables (as of v1.11) using:

    let table = new DataTable('#example', {
        // options
    });
    

    This is directly from the DataTables documentation.

  • kthorngrenkthorngren Posts: 16,773Questions: 25Answers: 3,971

    Uncaught TypeError: $ is not a function

    Are you loading jquery.js? Datatables still requires jqeury.js, see the dependencies docs, event if you want to initialize without using jquery methods.

    Kevin

  • allanallan Posts: 56,837Questions: 1Answers: 9,033 Site admin
    edited July 24

    I'll try it on Tuesday. I've been doing some work for ES modules support recently which might come into play here.

    Allan

  • argonzalez2017argonzalez2017 Posts: 4Questions: 1Answers: 0

    Yes i am.

    import jQuery from 'jquery';
    Object.assign(window, {
        $: jQuery,
        jQuery
    })
    
    import DataTable from 'datatables.net';
    let test = new DataTable("table", {
        search: false
    });
    

    Every other module that requires jQuery works. Only DataTables is having the issue.

    Uncaught TypeError: $ is not a function
    

    Should note. If I load it the jquery way, the table will load but will not load the necessary rowGroup plugin.

    import DataTable from 'datatables.net';
    import 'datatables.net-rowgroup';
    
    DataTable($)
    let table = $("table").DataTable(options);
    

    The error i receive

    table.rowGroup is not a function
    
Sign In or Register to comment.