Skip to content

Instantly share code, notes, and snippets.

@jrunestone
Last active January 26, 2024 20:25
Show Gist options
  • Star 28 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jrunestone/2fbe5d6d5e425b7c046168b6d6e74e95 to your computer and use it in GitHub Desktop.
Save jrunestone/2fbe5d6d5e425b7c046168b6d6e74e95 to your computer and use it in GitHub Desktop.
Here's how to make jQuery DataTables work with npm and webpack. DT checks for AMD compatibility first
which breaks when you're using CommonJS with webpack.
Install DT core: npm install datatables.net
Install a DT style: npm install datatables.net-bs (bootstrap)
Install the imports-loader webpack plugin: https://github.com/webpack/imports-loader#disable-amd
Create a loader "exception" just for DT in webpack.config.js:
module: {
loaders: [
{
test: /datatables\.net.*/,
loader: 'imports?define=>false'
}
]
}
Then to initialize DT in your app, do this in your main entry point:
// you can use import or require
import 'datatables.net';
import dt from 'datatables.net-bs';
dt(window, $);
Now you can use .DataTable():
$('table[data-table]').DataTable(); // or whatever you want
@DaveData
Copy link

The config syntax of the loader changed.

Here's what works for me:
https://stackoverflow.com/a/74204588/4653886

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment