Skip to content

Instantly share code, notes, and snippets.

@jrunestone
Last active June 12, 2024 03:23
Show Gist options
  • 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