Using Laravel Mix to implement a Datatable

I've encountered a problem and despite searching for a solution, I haven't been able to figure it out yet. I'm hoping someone can assist me in solving this issue. Below is the code I've been working with. Thank you in advance:

webpack.mix.js :

mix.autoload({
 jquery: ['$', 'jQuery', 'window.jQuery'],
})

mix.scripts([
  .js('resources/js/app.js', 'public/js').version()
  .js('resources/js/bootstrap.js', 'public/js').version()
  .js('resources/js/occupant.js', 'public/js').version()
  .sass('resources/sass/app.scss', 'public/css').version()
]);

bootstrap.js :

try {
  window.Popper = require('popper.js').default;
  window.$ = window.jQuery = require('jquery');

  require('bootstrap');

  require('../../node_modules/datatables.net/js/jquery.dataTables.js');
  require('../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js');
} catch (e) {}

occupant.js :

var $ = require('jquery');

$(document).ready(function () {
   $("#tblOccupant").DataTable(function () {
      
   });
});

Received console error :

occupant.js?id=043c6fbba06b4c7cd537:10984 Uncaught TypeError: $(...).DataTable is not a function
javascriptlaravelbootstrap-4datatables

Answer №1

Your application is having trouble locating datatables, but you can fix it by following these steps:

First, install the necessary dependencies using npm:

npm install datatables.net-bs4

then run:

npm install datatables.net-buttons-bs4

Next, add them to your resources/js/bootstrap.js file like this:

require('datatables.net-bs4');
require('datatables.net-buttons-bs4');

After that, edit your resources/scss/app.scss file and include the following:

// DataTables
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";

Ensure that your webpack.mix.js file contains the following:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Also, make sure you have included this line in the head section of your HTML:

<link href="{{asset(mix('css/app.css'))}}" rel="stylesheet">

and this line just before the closing </body> tag:

<script src="{{asset(mix('js/app.js'))}}"></script>

Finally, run either npm run watch or npm run dev to complete the process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include the title "addmoves" to the server using AngularJS?

https://i.sstatic.net/yR2fk.png Furthermore, I am looking to include a button that allows users to add additional movies. The goal is to input multiple sets of data simultaneously, such as: newMovies = [ { movieName:"", director:"", release ...

javascriptangularjs

JavaScript: The length property of array[index] appears as undefined, despite displaying in the function

Learning JavaScript has been quite the adventure for me, but I can't seem to wrap my head around why I'm encountering an error on line 6 (specifically, 'cannot read property "length" of undefined) even though the length of each word in the i ...

javascript

Modifying the width of a jQuery UI dialog from within the dialog box itself

I have designed an ASP.Net web page with a div and iFrame to display another page within it. Now, I am wondering if there is a way to change the width of the dialog from a button inside the dialog itself... Is this achievable? Thank you. ...

javascriptjqueryasp.netjquery-uijquery-dialog

A collection of dropdown fields sharing identical names but containing distinct IDs

I am looking to create an array of select fields with the same list of option values. The goal is to prevent a value that is selected in one field from appearing in another field. For example, if "a" is selected in the first field, it should not be avail ...

javascriptphpjqueryhtmlmysql

The syntax comparison between CommonJS and AMD modules in a modular AngularJS application

Apologies if this question has already been addressed, but I couldn't find any relevant information. Currently, I'm in the process of refactoring a large AngularJS application by creating components as AMD modules. The build process (grunt) utili ...

javascriptangularjsrequirejsamdcommonjs

Exploring the Combination of Conditional Rendering and Redux within the App.js File

Currently, I am in the process of setting up an authentication flow with Redux in my application. To control the display of either the app screen or the authentication screen, I have implemented conditional rendering in my App.js file. Here is the snippet ...

javascriptreactjsreact-nativeredux

Utilizing nested v-for in Vue.js with lodash's groupBy function

When fetching data from a database, I am using lodash groupby to group my data like so: var vm = this axios.get(this.buildURL()) .then(function(response) { Vue.set(vm.$data, 'model', response.data.model) vm.groupData = _.groupBy(vm.model ...

javascriptvue.jsvuejs2lodash

Add an image tag to the Canvas element

I'm attempting to add an image to a canvas element. Consider this code snippet (http://jsfiddle.net/n3L6e1wp/). I am aiming to replace the text shown in the canvas with an img tag. I have attempted to substitute the content of the div with: <img s ...

javascriptjqueryhtmlcsscanvas

Is the window frozen while Ajax processes the request?

When I make an ajax request that may take a significant amount of time to process on the server-side, I want to display a loading image during the request. However, the loading image is not showing up while the ajax request is processing. var ref = create ...

javascriptajax

Display basic HTML content prior to Vue.js initializing

In my application, there is a sidebar with an avatar widget created using Vue.js. The loading time for the widget causes the sidebar to display choppy animation. Is there a method to temporarily replace the Vue app with plain HTML until it finishes loadi ...

javascripthtmlvue.js

Error: The element 'scrollable' is not recognized in Angular2

I recently updated my angular2 project to the final release after previously using angular2 RC5 for development. However, I encountered an error message stating "scrollable is not a known element." If I change <scrollable><!--- angular code -- ...

javascriptangulartypescript

Guide to organizing a one-to-one object map within Angular JS ng-repeat

Is there a way to organize a one-to-one object map in angular.js using filters (or any other technique) while working within an ng-repeat loop? This is what I currently have: obj:{ a:3, c:5, d:1, g:15 } Basically, I want to achieve s ...

javascriptangularjsangularjs-ng-repeatangularjs-orderby

The use of PUPPETEER_DOWNLOAD_HOST has been phased out. It is recommended to use PUPPETEER_DOWNLOAD_BASE_URL moving forward. / Puppeteer

Trying to install puppeteer, I followed the installation guide. However, after a few seconds, I encountered this error: .../node_modules/puppeteer postinstall$ node install.mjs │ PUPPETEER_DOWNLOAD_HOST is deprecated. Use PUPPETEER_DOWNLOAD_BASE_URL ins ...

javascriptnpmpuppeteer

Struggling with HTTP requests in Laravel on iOS?

I'm in need of assistance and would sincerely appreciate any help with the issue I'm facing. I am currently working on an iOS app that communicates with a server running Laravel framework via HTTP requests. //Serialize parameters NSError *error ...

phpiosjsonhttplaravel

"Triggering a function with an onclick event when receiving Ajax

Hey there, I'm in the process of using Ajax to retrieve a SELECT tag. Essentially, when I click a button, it will insert a SELECT tag within the HTML. Each option within the select tag will have different outputs. I'm currently struggling to get ...

javascriptjqueryhtmlajax

Focusing on the active element in Typescript

I am working on a section marked with the class 'concert-landing-synopsis' and I need to add a class to a different element when this section comes into focus during scrolling. Despite exploring various solutions, the focused variable always seem ...

javascripttypescript

How can you use JavaScript regex to verify that the last three characters in a string are

What method can be used to confirm that a string concludes with precisely three digits? accepted examples: Hey-12-Therexx-111 001 xxx-5x444 rejected examples: Hey-12-Therexx-1111 Hey-12-Therexx-11 Hey-12-Therexx 12 112x ...

javascriptregex

Testing HTTP requests on a form click in Vue.js 2 - Let's see how

Within my component, I have the following method: methods:{ ContactUs(){ this.$http.post("/api/contact-us").then((res)=>{ ///do new stuff },(err)=>{ //do new stuff }) ...

javascriptunit-testingvue.jsjestjs

Using Jquery to insert an if statement within the .html element

Trying to implement jQuery to replace html content within an object, but struggling with incorporating an if statement. Like this: $(this).html("<select id=\'status\' name=\'status[]\' multiple><option valu ...

javascriptjquery

Using Event Delegation in Practice

I am facing an issue with loading 2 <span> elements from separate ajax scripts onto a webpage upon selection from a dropdown box. Here is a snippet of my code: <span id='room_rate'>1,000</span> // content loaded by one ajax scri ...

javascriptjqueryajaxjquery-eventsdelegation