FLUX RSS

  • YouTube
  • LinkedIn
  • Google

Tables de données + HTML 5 Boutons d’exportation + Laravel-Mix (Webpack)

Partager vos médias sociaux
  •  ;
  •  ;
  •  ;
  •  ;

In the last days, I have experienced a problem trying to use Tables de données et Bootstrap 4 with support for exporting results to Excel et PDF using Laravel-Mix. After hours and hours trying to put all scripts to work together, I finally win. Alors, I decide to write this little how to for those with same kind of troubles.

Tout d'abord, we need a working Laravel Project configured and running.

Let is install all needed libs with command below.

This install (while I wrote this text) jQuery 3.2, Bootstrap 4.0, Datatables.net 1.10.19, Datatables.net-buttons 1.5.6, Datatables.net-responsive 2.2.3, fontawesome-free 5.8.1, jszip 3.2.1 and pdfmake 0.1.54.

Add these lines to your bootstrap.js.

Note: If you use default configuration, webpack.mix.js will have one entry pointing to resources/js/app.js that include bootstrap.js.

Understanding the lines above.
window.$ = window.jQuery = require(‘jquery’); is the main one. It is different from original. Check the differences. We put the jQuery object in the window object to easily instanciate it when we need to append other CommonJs libs.

After, we need to load the Bootstrap lib. Easily made with require(‘bootstrap’) line.

Now begins the Datatables inclusion. For ExcelHtm5 Export is mandatory to load jszip. The line window.JSZip = require( ;jszip’; ); append the JSZip object to window and make it available to Datatables. Alors, the order matters.

Now we can include Datatables libs. We will use Datatables with Bootstrap 4 et Buttons. (lines 7 up to 12).

Lines 15 up to 17 includes pdfMake and is mandatory for pdfHTML5 Export.

We need to include some CSS files too. Again, in default configuration, we have resource/sass/app.scss file to include some Sass files. Add the lines below.

With all entries in our files, just run npm run dev command to build app.css et app.js files that must be included in blade with {{ mix(‘css/app.css’)}} et {{mix(‘js/app.js’)}}.

Here is a template to check if all scripts are working well.


Partager vos médias sociaux
  •  ;
  •  ;
  •  ;
  •  ;

Laisser une réponse

Votre adresse email ne sera pas publié. Les champs obligatoires sont marqués *

Ce site utilise Akismet pour réduire le spam. Apprenez comment vos données de commentaire sont transformées.