JQuery DataTables es un plugin de listas de datos muy útil, no necesitas escribir tu propio ordenamiento de paginaciones, filtrado y otras funciones, solo devuelves el formato json especificado, el plugin puede ayudarte a mostrar los datos. ¿Cómo aplicar este útil complemento de visualización de tablas a proyectos de Angular?
Este artículo integra Angular+bootstrap+DataTables
Sitio web oficial de DataTables:El inicio de sesión del hipervínculo es visible.
Tablas de datos angulares:El inicio de sesión del hipervínculo es visible.
(Angular Structural Framework para aplicaciones web dinámicas + plugin DataTables jQuery para tablas HTML complejas)
GitHub:El inicio de sesión del hipervínculo es visible.
Primero, echemos un vistazo al efecto tras la integración, como se muestra a continuación:
Instalación del arranque
Para usar la tabla de datos angular, necesitas instalar Node 8.9 o posterior y NPM 6 o posterior.
Este documento solo trata sobre proyectos que utilizan angular-cli. De hecho, el ecosistema front-end está creciendo a un ritmo que ya no puedo seguir. Así que solo hay un tutorial para el proyecto angular-cli. Si consigues que funcione, por ejemplo, un proyecto de SystemJS, por favor envía una solicitud pull para mejorar esta documentación. ¡Gracias!
Angular-CLI versión 7.YZ
Recomiendo usar angular-cli para crear y gestionar proyectos angulares
Prefiero advertirte que la versión demo está en la 7. YZ, mientras que las versiones más recientes de Angular-CLI pueden necesitar una configuración diferente.
NPM
Antes de poder obtener la última versión con NPM, necesitas instalar sus dependencias:
Mi proyecto actual es Angular 6.x, y la interfaz usa una plantilla de Bootstrap, y jQuery ha sido referenciado, así que mi propio proyecto lo necesitaTrato especial，
Instalaciones solo de NPM:
Descarga el paquete de complementos desde la web oficial de Datatables, consulta Bootstrap 4 y DataTables, y selecciona Descargar archivos a continuación. Página web:El inicio de sesión del hipervínculo es visible.
Extraemos el paquete descargado al directorio "src\assets\plugins\datatables.net",Catálogo No, por favor créalo tú mismo！！！
Edita el archivo angular.json para añadir dependencias en las propiedades de script y estilo:
Principalmente añade archivos datatables.css y datatables.js al proyecto.
Configuración de NgModule, importar DataTablesModule al nivel correspondiente de la aplicación.
Como mi ruta es perezosa para cargar el camino, yoLa verdad es que noImportado en el archivo "app.module.ts", por favorImportala según tu situación real。
Si la importación es incorrecta, el error es el siguiente:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
No se puede vincular a 'dtOptions' porque no es una propiedad conocida de 'table'. ("<div class="row">
<clase div="col-12">
<tabla de datos [ERROR ->]
Paginación en el lado del servidor
Página HTML (baseinfocompany-list.component.html):
Código CSS (debe añadirse, y con salvedades):
Archivo baseinfoCompany-list.component.scss:
Archivo styles.scss:
Código de scripto (baseinfocompany-list.component.ts)
Nota: HttpClientModule también debe añadirse en app.module.ts, de la siguiente manera:
El código chino chino para las tablas de datos es el siguiente:
Turistas, si queréis ver el contenido oculto de esta publicación, por favor Respuesta
|
Publicado en 29/10/2018 14:54:16
|
|
|
|
Publicado en 10/11/2018 21:58:48
|
Participa en el arquitecto de formas