RSS

  • YouTube
  • LinkedIn
  • Google

Datatables + HTML 5 Export Buttons + Laravel-Mix (Webpack)

Compartilhe em suas mídias sociais
  •  
  •  
  •  
  •  

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

First of all, 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. So, the order matters.

Now we can include Datatables libs. We will use Datatables with Bootstrap 4 and 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 and app.js files that must be included in blade with {{ mix(‘css/app.css’)}} and {{mix(‘js/app.js’)}}.

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


Compartilhe em suas mídias sociais
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.