6

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();
});
Improve this question

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

DataTable($); worked
Dude, I love you. Hours wasted trying to figure this out but your solution worked.
You Rock!!! Thank You! This will help out so many users out there using both these technologies.
3

Here's the solution to my problem.

bootstrap.js

import _ from 'lodash';
window._ = _;

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

import DataTable from 'datatables.net';
window.DataTable = DataTable;
DataTable($);

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

Comments

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

Improve this answer

Comments

0

first import DataTables CSS and JS in your application.

path: resources/js/app.js

import DataTable from 'admin-lte/plugins/datatables/jquery.dataTables.min.js';
window.DataTable = DataTable;

in blade file

 @push('scripts')
    <script type="module" >
      $(document).ready(function() {
           new DataTable('#table2', {} );
      });
     </script>
    @endpush
Improve this answer

Comments