RSS

  • YouTube
  • LinkedIn
  • 谷歌

数据表 + Html 5 出口按钮 + 拉拉维尔-米格 (网络包)

在你的社交媒体分享
  •  ;
  •  ;
  •  ;
  •  ;

In the last days, I have experienced a problem trying to use 数据表 Bootstrap 4 with support for exporting results to Excel PDF using 拉拉维尔-米格. After hours and hours trying to put all scripts to work together, I finally win. 所以, I decide to write this little how to for those with same kind of troubles.

首先, 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. 所以, the order matters.

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

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


在你的社交媒体分享
  •  ;
  •  ;
  •  ;
  •  ;

留言

您的电子邮件地址将不会发布. 标记必填的字段 *

此网站使用 Akismet 减少垃圾邮件. 了解如何处理注释数据.