Issues with Buttons in DataTables 2.0 using Node.js/Nunjucks/Webpack/Bulma Stack

makenio

Hello DataTables Community,

I've recently upgraded to DataTables version 2.0 and am encountering issues with the buttons in my application. My technology stack includes Node.js, Nunjucks in an MVC model, Webpack, Vue.js, TypeScript, and Bulma for CSS with the bulma-dark theme. Here's a detailed context and the nature of the issue:

Context:

Frameworks/Libraries:
Node.js
Nunjucks (MVC model)
Webpack (for CSS and JS)
Vue.js (used for specific scenarios like dynamic forms)
TypeScript
Bulma with bulma-dark for CSS styling
Planned Implementations:
Use of DataTables for data display components
Sequelize (pre-integrated)
Plans to use Redis for caching and messaging
MiniO for file handling (not yet implemented)
Issue:
After updating to DataTables 2.0, the buttons (such as CSV export, Excel export, etc.) are not functioning as expected. Below is a snippet of my implementation code:

typescript

//src/public/js/functions/datatableFunctions.ts
import pdfmake from 'pdfmake';
import jszip from 'jszip';
import DataTable from 'datatables.net-bm';
import 'datatables.net-autofill-bm';
import 'datatables.net-buttons-bm';
import 'datatables.net-buttons/js/buttons.colVis.js';
import 'datatables.net-buttons/js/buttons.html5.js';
import 'datatables.net-buttons/js/buttons.print.js';
import 'datatables.net-colreorder-bm';
import 'datatables.net-responsive-bm';
import 'datatables.net-rowreorder-bm';
import 'datatables.net-select-bm';

import 'datatables.net-bm/css/dataTables.bulma.css';
import 'datatables.net-autofill-bm/css/autoFill.bulma.css'
import 'datatables.net-buttons-bm/css/buttons.bulma.css'
import 'datatables.net-colreorder-bm/css/colReorder.bulma.css'
import 'datatables.net-responsive-bm/css/responsive.bulma.css'
import 'datatables.net-rowreorder-bm/css/rowReorder.bulma.css'
import 'datatables.net-select-bm/css/select.bulma.css'

import '../../css/template/dataTables.scss';

// Luego, en tu script principal donde inicializas DataTables:
document.addEventListener('DOMContentLoaded', function() {

// Configuración específica para las extensiones
const opcionesDataTables = {
dom: '<"top"lf>rt<"bottom-left"B><"bottom-right"pi><"clear">',// Indica la disposición de los elementos de la tabla
// Configuración de la extensión Buttons
buttons: [
{
extend: 'csv',
filename: 'dataTables'
// Aquí puedes agregar más opciones específicas para el botón CSV si es necesario
},
'excel','copy','print' // Los otros botones siguen igual
]
};

const tableElement = document.querySelector<HTMLTableElement>('#miTabla');
if (!tableElement) throw new Error('Tabla no encontrada');

const table = new DataTable('#miTabla', {
// Incluye la configuración extendida
...opcionesDataTables,
responsive: true,
select: true,
rowReorder: true,
colReorder: true,
autoFill: true
});

const toggleReorderFeatures = (enable: boolean) => {
if (enable) {
if (table.rowReorder) table.rowReorder.enable();
if (table.colReorder) table.colReorder.enable();
} else {
if (table.rowReorder) table.rowReorder.disable();
if (table.colReorder) table.colReorder.disable();
}
};

const checkScreenSize = () => {
const isLargeScreen = window.matchMedia('(min-width: 768px)').matches;
toggleReorderFeatures(isLargeScreen);
};

// Ejecuta la función al cargar la página
checkScreenSize();

// Añade el evento de escucha para cambios de tamaño de la ventana
window.addEventListener('resize', checkScreenSize);
});

This script is imported in my main.ts file, which is then compiled with Webpack. I will provide a link to the source code on GitHub and a functioning demo page.

Seeking Help:
I am looking for insights or suggestions on why the buttons might not be functioning correctly with this setup and the new version of DataTables. Any advice or guidance would be greatly appreciated.

Link for project: https://github.com/make-nio/Template.git

Thank you in advance for your assistance.

kthorngren

After updating to DataTables 2.0, the buttons (such as CSV export, Excel export, etc.) are not functioning as expected.

What exactly is not working?

Do you get errors in the browser's console?

Kevin

makenio

I have no errors in the console, neither from the client nor from the server, the Excel or PDF buttons simply do not appear, only the csv, the copy and the print appear, I would attach an image for you to see but I don't know how to do it.

makenio

makenio

allan

If it is just the Excel and PDF buttons which aren't showing up, it suggests that JSZip and makepdf haven't been registered, or aren't globally available.

Try:

DataTable.Buttons.jszip(jszip);
DataTable.Buttons.pdfMake(pdfmake);

just after your imports.

Allan

makenio

Thanks Alan, I will check the imports of those 2 elements, supposedly they are imported, but it may be that I am calling them wrong...

makenio

It Works!!! Thank you so much Alan!!!

allan

Awesome. Yup, with the imports, they are available locally, but Buttons knows nothing about them, so you need to call those functions to "register" them.

Allan