How to add a formatter to a bootstrap-table and Angular 4?

Question

How to add a formatter to a bootstrap-table and Angular 4?

Navigation

#1 by (2 votes)

0

How to add a formatter to a bootstrap-table?

Greetings community, I have the following problem I am using the bootstrap-table library in a project developed with Angular 4, I try to add a function to the data-formatter but it only shows me the name that I put inside the data-formatter="test "but not the return of the function, does anyone know what I'm doing wrong?

<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>

In my 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");
        }
    });
  }

javascript angularjs

asked by Elberth Agreda 17.08.2017 в 00:51

source

1 answer

Pass several data to modal how to recover the data sent by post in php?

score 2 · Answer 1

What you can do is access the DOM of your child component, which would be your table, for this use the decorator @ViewChild() that provides you angular.

It would be something like:

HTML

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

    ...

</table>

And then in your .ts file you declare it as a variable

TS

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

@ViewChild('tb') miTabla;

export class SarazaComponent imports OnInit {

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

}

In this way you can access the properties, events and methods of your component.