How to use DataTables with Laravel Vite?

Question

I'm having trouble adding DataTables to my new Laravel 9.21 instance. But I'm getting an error in the console. What am I missing?

Uncaught TypeError: $(...).DataTable is not a function

bootstrap.js

import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;

import DataTable from 'datatables.net';
window.DataTable = DataTable;

$(document).ready(function() {
    $('#example').DataTable();
});

score 8 · Accepted Answer · edited Jan 29 '23 at 18:11

8

The trick is DataTable(window, window.$)

The idea comes from the official doc of datatables.net-bs5. The setup from require( 'datatables.net-bs5' )( window, $ );

My app.js looks like this

import "./bootstrap";
import "../sass/app.scss";

import * as bootstrap from "bootstrap";

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

import DataTable from "datatables.net-bs5";
DataTable(window, window.$);

I hope it gives you some hints.

edited Jan 29 '23 at 18:11

Karl Hill

12,937
5
58
95

answered Jul 24 '22 at 06:26

Ken Hui

368
3
17

DataTable($); worked – Karl Hill Jul 30 '22 at 02:59
Dude, I love you. Hours wasted trying to figure this out but your solution worked. – Ryan Mortier Aug 30 '22 at 19:56
You Rock!!! Thank You! This will help out so many users out there using both these technologies. – mitcheljh Feb 18 '23 at 15:04

Karl Hill · Answer 2 · 2023-01-29T18:15:01.593

3

Here's the solution to my problem.

bootstrap.js

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

import DataTable from 'datatables.net';
window.DataTable = DataTable;

$(document).ready(function() {
    $('#example').DataTable();
});

edited Jan 29 '23 at 18:15

answered Jul 30 '22 at 03:00

Karl Hill

12,937
5
58
95

score 1 · Answer 3 · answered Jan 28 '23 at 13:28

1

In my case, just the simple thing worked.

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

import DataTable from 'datatables.net';
window.DataTable = DataTable;

My versions : Vite 4.0.4 and Laravel 9

answered Jan 28 '23 at 13:28

Linga

10,379
10
52
104

How to use DataTables with Laravel Vite?

3 Answers3