FLUX RSS

  • YouTube
  • LinkedIn
  • Google

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

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

Dans les derniers jours, J’ai connu un problème en essayant d’utiliser Tables de données et Bootstrap 4 avec le soutien de l’exportation des résultats Excel et PDF à l’aide Laravel-Mix. Après des heures et des heures à essayer de mettre tous les scripts pour travailler ensemble, Je gagne enfin. Alors, J’ai décider d’écrire ce petit Comment pour ceux qui ont le même genre de troubles.

Tout d'abord, Nous avons besoin d’un travail que Laravel projet configuré et en cours d’exécution.

Let est install que tous nécessaires libs avec la commande ci-dessous.

Cette installation (Alors que j’ai écrit ce texte) jQuery 3.2, Bootstrap 4.0, DataTables.net 1.10.19, DataTables.net-boutons 1.5.6, DataTables.net-sensible 2.2.3, fontawesome-gratuit 5.8.1, jszip 3.2.1 et pdfmake 0.1.54.

Ajouter ces lignes à votre bootstrap.js.

Remarque: Si vous utilisez une configuration par défaut, webpack.mix.js aura une entrée pointant vers resources/js/app.js qui incluent bootstrap.js.

Comprendre les lignes ci-dessus.
window.$ = window.jQuery = require(‘jquery’); la principale est. Il est différent de l’original. Vérifiez les différences. Nous mettons l’objet jQuery dans l’objet window à instancier facilement quand nous avons besoin d’ajouter d’autres libs CommonJs.

Après, Nous avons besoin de charger le Bootstrap lib. Faites facilement avec require(‘bootstrap’) ligne.

Maintenant commence l’inclusion de Datatables. Pour ExcelHtm5 Export est obligatoire pour charger jszip. La ligne fenêtre. JSZip = exiger( ;jszip’; ); ajouter l’objet JSZip à window et le rendre disponible aux Datatables. Alors, les questions d’ordre.

Maintenant nous pouvons inclure des Datatables libs. Nous allons utiliser les tables de données bootstrap 4 et Buttons. (lignes 7 jusqu'à 12).

Lignes 15 jusqu'à 17 comprend pdfMake et est obligatoire pour pdfHTML5 Export.

Nous devons inclure certains fichiers CSS trop. Encore une fois, dans la configuration par défaut, Nous avons resource/sass/app.scss fichier à inclure certains fichiers Sass. Ajoutez les lignes suivantes.

Avec toutes les entrées dans nos fichiers, Il suffit d’exécuter npm run dev commande pour construire App.CSS et App.js fichiers qui doivent être inclus dans la lame avec {{ mix(‘css/app.css’)}} et {{mix(‘js/app.js’)}}.

Voici un modèle pour vérifier si tous les scripts fonctionnent bien.


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.