0

¿Como agregar un formatter a una bootstrap-table?

Saludos comunidad, tengo el siguiente inconveniente estoy utilizando la libreria bootstrap-table en un proyecto desarrollado con Angular 4, trato de agregar una funcion al data-formatter pero solo me muestra el nombre que pongo dentro del data-formatter="prueba" más no el return de la función, alguien sabe que estoy haciendo mal?

<table id="table" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
    <thead>
       <tr>
         <th data-field="state" data-checkbox="true"></th>
         <th data-field="userId" data-sortable="true">Usuario</th>
         <th data-field="userName" data-sortable="true">Nombre</th>
         <th data-field="lastName" data-sortable="true">Apellido</th>
         <th data-field="email" data-sortable="true">Correo</th>
         <th data-field="mobilePhone">Teléfono</th>
         <th data-field="cargo">Cargo</th>
         <th data-field="evento" data-formatter="prueba">Eventos</th>
       </tr>
      </thead>
</table>

En mi typescript:

tableRow(data){
    $(function () {
        $('#table').bootstrapTable({
            data: data,
            pagination: true,
            pageNumber: 1,
            pageSize: 10,
            search: true,
            minimumCountColumns: 2,
            iconsPrefix : 'icon',
            icons: {
              refresh: 'ion-ios-loop-strong',
              toggle: 'ion-ios-list-outline',
              columns: 'ion-ios-more'
            }
        });
        function prueba(){
          alert("oksd");
        }
    });
  }

1 respuesta 1

2

Lo que puedes hacer es acceder al DOM de tu componente-hijo, que vendría siendo tu table, para esto utiliza el decorador @ViewChild() que te provee angular.

Seria algo como:

HTML

<table #tb data-show-refresh="true" data-show-toggle="true" data-show-columns="true">

    ...

</table>

Y luego en tu archivo .ts lo declaras como una variable

TS

import { Component, OnInit, ViewChild } from '@angular/core';

@ViewChild('tb') miTabla;

export class SarazaComponent imports OnInit {

   ngOnInit() { 
     console.log(this.miTabla);
   }

}

De esta manera podes acceder a las propiedades, eventos y métodos de tu componente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.