pageResize Plugin as a Module

skawaii

I'm very interested in using the pageResize plugin (https://datatables.net/blog/2015-04-10) for my app, but haven't been able to get it working with my Webpack/module-based build yet. Has anyone else ran into this same problem and figured out a solution? I'm pretty new to Webpack, so please pardon my ignorance if the solution is straight-forward.

Here's what I've tried so far:

import dt from 'datatables.net-bs4';
import 'lib/dataTables.pageResize.min.js';
import 'datatables.net-bs4/css/dataTables.bootstrap4.css';

export default function(container, state) {
    let template = '<my html table code>';
    ...
    $table.DataTable();
};

My webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/js/app.js'
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './dist',
        hot: true
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: ['file-loader']
        }]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.$': 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    resolve: {
        alias: {
            'lib': path.resolve(__dirname, 'lib')
        }
    }
};

I also tried using script-loader in my Webpack config, but that didn't seem to do anything in this instance. I'm not sure if it's supposed to and I just did something wrong.

Any help would be greatly appreciated! Thanks!

allan

I'm not sure why I didn't make them UMD modules, but they are now. You should be able to include them now - latest source is here.

Allan

skawaii

Thank you so much! This is a great plugin and the fact that you helped me out with this in less than a day is amazing!

For some more context, I'm also using Golden Layout and my table is actually inside a Golden Layout component. After getting the module-based plugin actually loaded, I noticed nothing was happening. I finally realized that the init.dt event was getting swallowed by the Golden Layout component and never making it to the document.

I got around this by triggering the event from within my Golden Layout component. So, using my Webpack config from above, my module's code now looks like:

import dt from 'datatables.net-bs4';
import 'lib/dataTables.pageResize.min';
import 'datatables.net-bs4/css/dataTables.bootstrap4.css';
 
export default function(container, state) {
    let template = '<my html table code>';
    
    // trigger the event listener that DT attaches to the document
    container.getElement().on('init.dt', function(eventObj, settings) {
        $(document).trigger('init.dt', settings);
    });

    container.getElement().html(template);
    container.getElement().find('table').DataTable({
        pageResize: true
    });
};

I wanted to share that in case anyone else out there runs into the same issue as I did.

allan

That's interesting, thanks for posting that. I haven't used Golden Layout myself, but yes, I can see that being a problem if it is rendering outside the main document and then inserting the elements into it. Nice workaround .

Allan