Here is an answer to make datatable.net to work with Vite and VueJs (and its plugins select, RowGroup, Buttons,...)
Before, do yarn create vite.
import for "jquery" and "datatable.net" have to be typed with "jquery" and "datatable.net" and not typed with "min.js". Look at the source of jquery.dataTables.js: it expects some of form of name.
src/main.js
import jQuery from "jquery";
import $ from "jquery";
import DataTable from "datatables.net";
DataTable(window, $);
// 'select ' can be disabled
import select from "datatables.net-select/js/dataTables.select.min.js";
select(window, $);
// 'RowGroup ' can be disabled
import RowGroup from "datatables.net-rowgroup/js/dataTables.rowGroup.min.js";
RowGroup(window, $);
// 'Buttons' can be disabled
import Buttons from "datatables.net-buttons/js/dataTables.buttons.min.js";
Buttons(window, $);
import b1 from "datatables.net-buttons/js/buttons.colVis.min.js";
b1(window, $);
import b2 from "datatables.net-buttons/js/buttons.print.min.js";
b2(window, $);
import b3 from "datatables.net-buttons/js/buttons.html5.min.js";
b3(window, $);
// end of 'Buttons part
import "datatables.net-css";
import "bootstrap/dist/css/bootstrap.min.css";
import { createApp } from "vue";
import "@/style.css";
import App from "@/App.vue";
createApp(App).mount("#app");
vite.config.js
import path from "path";
import { defineConfig } from "vite";
//import { viteCommonjs, esbuildCommonjs } from "@originjs/vite-plugin-commonjs";
import vue from "@vitejs/plugin-vue";
import { createHtmlPlugin } from "vite-plugin-html";
console.log(path.basename(path.resolve(__dirname)));
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: [
{
find: "@",
replacement: path.resolve(__dirname, "src"),
},
// not mandatory
{
find: "jquery",
replacement: path.resolve(
__dirname,
"node_modules/jquery/dist/jquery.min.js"
),
},
// not mandatory, only to force min.js
{
find: "datatables.net",
replacement: path.resolve(
__dirname,
"node_modules/datatables.net/js/jquery.dataTables.min.js"
),
},
{
find: "datatables.net-css",
replacement: path.resolve(
__dirname,
"node_modules/datatables.net-dt/css/jquery.dataTables.min.css"
),
},
],
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
},
plugins: [
vue(),
createHtmlPlugin({
inject: {
data: {
title: "DataTable.net with ViteJS and VueJs",
},
},
}),
],
base: "",
build: {},
});
src/App.vue
<template>
<div>
<h2>Implement jQuery DataTable in Vue Js</h2>
<table class="table" id="datatable">
<thead>
<tr>
<th>ID</th>
<th>Product Title</th>
<th>Product Price</th>
<th>Created On</th>
</tr>
</thead>
<tbody>
<tr v-for="item in products" :key="item.id">
<td>{{ item.userId }}</td>
<td>{{ item.id }}</td>
<td>{{ item.title }}</td>
<td>{{ item.completed }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos").then((response) => {
$("#datatable").DataTable({
data: response.data,
columns: [
{ data: "userId" },
{ data: "id" },
{ data: "title" },
{ data: "completed" },
],
pageLength: 10,
lengthMenu: [
[5, 10, 25, 50],
[5, 10, 25, 50],
],
// 'rowGroup' can be disabled
// 'rowGroup' needs datatables.net-rowgroup/js/dataTables.rowGroup.min.js
rowGroup: { dataSrc: "userId" },
// 'select' can be disabled
// 'select' needs datatables.net-select/js/dataTables.select.min.js
select: "single", // "single" or "multi" or "true"
// 'buttons' can be disabled
// 'buttons' needs
// - datatables.net-buttons/js/dataTables.buttons.min.js and buttons.colVis.min.js and buttons.print.min.js and buttons.html5.min.js
// - dom :"B"
dom: "Blfrtip", //'Blfrtip' for "B"uttons copy, lfrtip options byr défaut
buttons: [
"copyHtml5",
"csvHtml5",
"print",
// start of example of custom button
{
text: "Remove rowGroup",
action: function (e, dt, node, config) {
dt.rowGroup().dataSrc("").draw();
},
},
{
text: "Add rowGroup",
action: function (e, dt, node, config) {
dt.rowGroup().dataSrc("userId").draw();
},
},
{
text: "Single Select",
action: function (e, dt, node, config) {
dt.select.style("single").draw();
},
},
{
text: "Multi select",
action: function (e, dt, node, config) {
dt.select.style("multi").draw();
},
},
// end of example of custom button
],
});
});
},
data: function () {
return {
products: [],
};
},
};
</script>
package.json
(Don't forget yarn install)
{
"private": true,
"name": "vite-project",
"version": "0.0.0",
"scripts": {
"build": "vite build",
"dev": "vite --host",
"devlocal": "vite",
"format": "yarn run prettier && yarn run lint",
"format:packagejson": "npx prettier-package-json --tab-width 2 --write",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src --fix *.js --no-error-on-unmatched-pattern",
"prettier": "npx prettier --write src/*.?js src/*.html index.html --no-error-on-unmatched-pattern",
"preview": "vite preview"
},
"dependencies": {
"@babel/core": "^7.19.6",
"@babel/eslint-parser": "^7.19.1",
"@originjs/vite-plugin-commonjs": "^1.0.3",
"@popperjs/core": "^2.11.6",
"@vue/eslint-config-prettier": "^7.0.0",
"axios": "^1.1.2",
"bootstrap": "^5.2.2",
"buffer": "^6.0.3",
"datatables.net": "^1.11.4",
"datatables.net-buttons": "^2.2.2",
"datatables.net-dt": "^1.11.4",
"datatables.net-rowgroup": "^1.2.0",
"datatables.net-select": "^1.4.0",
"eslint": "^8.25.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.6.0",
"jquery": "^3.6.1",
"prettier": "^2.7.1",
"process": "^0.11.10",
"vite-plugin-html": "^3.2.0",
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-prettier": "^4.2.1",
"vite": "^3.1.0"
},
"compilerOptions": {
"target": "es2015",
"types": [
"vite/client"
]
},
"eslintConfig": {
"root": true,
"env": {
"node": true,
"commonjs": true,
"browser": true,
"es6": true
},
"parserOptions": {
"sourceType": "module"
},
"plugins": [
"vue",
"html",
"prettier"
],
"rules": {
"no-unused-vars": "off"
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/prettier"
]
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- title %></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent