RSS

  • YouTube
  • LinkedIn
  • Google

DataTables + HTML 5 Exportación de botones + Laravel-Mix (WebPack)

Compartir en tus redes sociales
  •  ;
  •  ;
  •  ;
  •  ;

En los últimos días, He experimentado un problema tratando de usar DataTables y Manos a la obra 4 con soporte para exportar los resultados Excel y PDF utilizando Laravel-Mix. Después de horas y horas tratando de poner todos los scripts para trabajar juntos, Por fin gano. Por lo tanto, Me decido a escribir este Cómo para aquellos con el mismo tipo de problemas.

En primer lugar, Necesitamos un trabajo que proyecto Laravel configurado y funcionando.

Let es instalar de que todo necesario libs con comando por debajo.

Esta instalación (mientras que escribí este texto) jQuery 3.2, Manos a la obra 4.0, DataTables.net 1.10.19, DataTables.net-botones 1.5.6, DataTables.net-respuesta 2.2.3, libre de fontawesome 5.8.1, jszip 3.2.1 y pdfmake 0.1.54.

Añadir estas líneas a su bootstrap.js.

Nota: Si utiliza la configuración predeterminada, WebPack.Mix.js tendrá una entrada apuntando a resources/js/app.js que son bootstrap.js.

Comprensión de las líneas de arriba.
window.$ = window.jQuery = require(‘jquery’); es el principal. Es diferente de la original. Compruebe las diferencias. Ponemos el objeto jQuery en el objeto window que instanciamos fácilmente cuando nos es necesario añadir otras libs de CommonJs.

Después de la, tenemos que cargar el Bootstrap lib. Gracias require(‘bootstrap’) línea.

Ahora comienza la inclusión de tablas. Para ExcelHtm5 Export es obligatorio cargar jszip. La línea de ventana. JSZip = requieren( ;jszip’; ); anexar el objeto JSZip window y disposición de Datatables. Por lo tanto, los asuntos de orden.

Ahora podemos incluir librerías de tablas. Utilizaremos Datatables con Bootstrap 4 y Buttons. (líneas de 7 hasta 12).

Líneas de 15 hasta 17 incluye pdfMake y es obligatoria para pdfHTML5 Export.

Tenemos que incluir también algunos archivos CSS. Otra vez, en la configuración por defecto, tenemos resource/sass/app.scss archivo para incluir algunos archivos de Sass. Agregue las líneas siguientes.

Con todas las entradas de nuestros archivos, basta con ejecutar npm run dev comando para construir App.CSS y App.js archivos que deben incluirse en la hoja con {{ mix(‘css/app.css’)}} y {{mix(‘js/app.js’)}}.

Aquí está una plantilla para comprobar si todos los scripts están funcionando bien.


Compartir en tus redes sociales
  •  ;
  •  ;
  •  ;
  •  ;

Contesta

Su dirección de correo electrónico no será publicado. Campos requeridos están marcados *

Este sitio utiliza Akismet para reducir el spam. Aprender cómo se procesaron los datos de comentario.