Example of Datatables.Net With Bootstrap 5 & Buttons in Webpack

Example of Datatables.Net With Bootstrap 5 & Buttons in Webpack

GreggThelenGreggThelen Posts: 3Questions: 1Answers: 0

For the most part my current configuration works; however, there are two problems:
* Column visibility dropdown isn't working - as in, the dropdown portion doesn't even show.
* When copying to the clipboard the message displays at the bottom of the page instead of centered on the table.

The copying works, and I can export to a PDF, and the normal table functions/sorting/searching all work.

So for Webpack, what am I missing in my vendor.js file as depicted below?

window.$ = require('jquery');
window.jQuery = require('jquery');

//datatables
import "datatables.net-bs5";
import "datatables.net-buttons-bs5";
import "datatables.net-buttons/js/buttons.html5.min.js";
import "datatables.net-buttons/js/buttons.print.min.js";
import "datatables.net-buttons/js/buttons.colvis.min.js";
import "jszip";
import  pdfMake from "pdfmake/build/pdfmake.min.js";
import  pdfFonts from "pdfmake/build/vfs_fonts.js";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

The versions being imported are:

   "bootstrap": "^5.2.3",
    "datatables.net": "^1.13.1",
    "datatables.net-bs5": "^1.13.1",
    "datatables.net-buttons-bs5": "^2.3.3",
    "jquery": "^3.6.2",
    "jszip": "^3.10.1",
    "pdfmake": "^0.2.7",

Screenshot of what my current setting produce:

This is so very close it is driving me nuts.
Can anyone produce a working webpack example of Datatables.net w/Bootstrap 5 all wrapped up in Webpack?

This question has accepted answers - jump to:

Answers

  • GreggThelenGreggThelen Posts: 3Questions: 1Answers: 0

    My apologies, I left off the js on the page itself:

    I'd also be interested in getting Excel working.
    The button doesn't show at all.

  • allanallan Posts: 63,489Questions: 1Answers: 10,468 Site admin
    Answer ✓

    It rather sounds like a CSS issue. Could you show me your full WebPack config and I'll see if I can put an example together from it.

    Also, what are your CSS includes?

    Allan

  • GreggThelenGreggThelen Posts: 3Questions: 1Answers: 0

    It was a CSS issue and I was able to fix it.
    Here is my code for anyone attempting Webpack and Datatables.net

    package.json

    {
      "name": "example.net.ui",
      "version": "1.0.0",
      "description": "Example",
      "mode": "production",
      "private": true,
      "main": "index.js",
      "dependencies": {
        "bootstrap": "^5.2.3",
        "datatables.net": "^1.13.1",
        "datatables.net-bs5": "^1.13.1",
        "datatables.net-buttons-bs5": "^2.3.3",
        "jquery": "^3.6.2",
        "jszip": "^3.10.1",
        "pdfmake": "^0.2.7",
        "select2": "^4.0.13",
        "select2-bootstrap-5-theme": "^1.3.0",
        "summernote": "^0.8.20"
      },
      "devDependencies": {
        "clean-webpack-plugin": "^4.0.0",
        "copy-webpack-plugin": "^11.0.0",
        "css-loader": "^6.7.3",
        "html-webpack-plugin": "^5.5.0",
        "mini-css-extract-plugin": "^2.7.2",
        "node-sass": "^8.0.0",
        "npm": "^9.2.0",
        "sass-loader": "^13.2.0",
        "style-loader": "^3.3.1",
        "url-loader": "^4.1.1",
        "webpack": "^5.75.0",
        "webpack-cli": "^5.0.1"
      },
      "scripts": {
        "build": "webpack --config webpack.config.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    

    webpack.config.js

    const path = require("path");
    const webpack = require('webpack');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    const CopyPlugin = require("copy-webpack-plugin");
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = {
        mode: "production",
        entry: {
            site: "./wwwroot/src/site.js",
            vendor: "./wwwroot/src/vendor.js"
        },
        output: {
            filename: "./js/[name].js",
            path: path.resolve(__dirname, "./wwwroot/dist"),
            publicPath: '/_content/Example/dist/',
            sourceMapFilename: '[name].js.map'
        },
        plugins: [
            new MiniCssExtractPlugin(
                {
                    filename: "./css/[name].css"
                }),
            new CopyPlugin({
                patterns: [
                    { from: "./wwwroot/src/img", to: "img" }
                ]
            }),   
            new CleanWebpackPlugin(),
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader"
                    ],
                },
                {
                    test: /\.(woff(2)?|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    type: 'asset/resource',
                    dependency: { not: ['url'] },
                }
            ],
        },
        resolve: {
            alias: {
                jQuery: path.resolve(__dirname, "node_modules/jquery"),
            },
        },
    };
    

    vendor.js

        window.$ = require('jquery');
        window.jQuery = require('jquery');
    
        //bootstrap
        import "bootstrap/dist/js/bootstrap.bundle.min.js";
        import "bootstrap/dist/css/bootstrap.min.css";
    
        //datatables
        import "datatables.net-bs5";
        import "datatables.net-buttons-bs5";
        import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
        import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
        import "datatables.net-buttons/js/buttons.html5.min.js";
        import "datatables.net-buttons/js/buttons.print.min.js";
        import "datatables.net-buttons/js/buttons.colvis.min.js";
        import "jszip";
        import  pdfMake from "pdfmake/build/pdfmake.min.js";
        import  pdfFonts from "pdfmake/build/vfs_fonts.js";
        pdfMake.vfs = pdfFonts.pdfMake.vfs;
    
  • allanallan Posts: 63,489Questions: 1Answers: 10,468 Site admin
    Answer ✓

    Superb - thanks for posting back and great to hear you got it working.

    Allan

Sign In or Register to comment.