Este es un caso interesante, estoy logrando obtener el estado actual de la matriz de las columnas cuando uso JS + jQuery puro, pero cuando trato de lograr lo mismo en Angular 12, ¡esto no funcionará! Estoy leyendo los documentos de Angular datatables también datatables.net, ¡pero esto no funcionará en el proyecto!
Aquí está el código que estoy tratando de configurar en Angular:
import { Component, OnInit, ViewChild } from '@angular/core'; declare var $:JQueryStatic; @Component({ selector: 'app-mandant', templateUrl: './mandant.component.html', styleUrls: ['./mandant.component.scss'] }) export class MandantComponent implements OnInit { dtOptions = {}; constructor() { } ngOnInit(): void { this.dtOptions = { dom: 'Bfrtip', bLengthChange: true, searching: false, table: "#dttable", info: true, buttons: [ 'colvis', 'copy', 'print', 'excel', { text: 'Some button', key: '1', action: function (e: any, dt: any, node: any, config: any) { alert('Button activated'); } } ], colReorder: { enable: true, order: [1, 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], } }; this.dtOptions.on('column-reorder.dt', function (e, settings, details) { console.log("You just reordered the cols, here is your current state: ", this.dtOptions.order()); }); } ngAfterViewInit(): void { } }El logro para mí es este fragmento de código, si este código devuelve el estado actual de la matriz después de cada cambio en las columnas, mi preocupación se resuelve:
this.dtOptions.on('column-reorder.dt', function (e, settings, details) { console.log("You just reordered the cols, here is your current state: ", this.dtOptions.order()); });Encontré la solución después de unos días, estaba tratando de cargar todo en ngViewInit(); pero en realidad tuve que hacer eso en ngAfterViewInit(); :
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-mandant', templateUrl: './mandant.component.html', styleUrls: ['./mandant.component.scss'] }) export class MandantComponent implements OnInit, AfterViewInit { @ViewChild('dataTable', { static: false }) table: any; dtOptions: any; constructor() { } ngAfterViewInit(): void { var cols: any = localStorage.getItem("mandanten") === null ? null : JSON.parse(localStorage.getItem("mandanten") || "[]"); this.dtOptions = { dom: "Bfrtip", "buttons": [ "colvis", "copy", "excel" ], "colReorder": { "enable": true, "realtime": false, "order": cols, } }; var table: any = $(this.table.nativeElement).DataTable(this.dtOptions); table.on("column-reorder", function () { localStorage.setItem("mandanten", JSON.stringify(table.colReorder.order())); }); table.on( 'buttons-action', function ( e: any, buttonApi: any, dataTable: any, node: any, config: any ) { console.log(buttonApi.columns()); } ); }; ngOnInit(): void { } }