Search code examples
javascriptangularbootstrap-table

How to use the date-formatter of bootstrap-table in angular2?


Hello, I am using the bootstrap-table library with an Angular4. But using date-formatter does not bring me any value.

code html:

<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="acciones">Eventos</th>
                                        </tr>
                                    </thead>
                                </table>

code 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 acciones(){
      return "<a href='/user:id' />Edit</a>";
    }
  }

Solution

  • The function acciones is only defined in the typescript function tableRow.

    bootstrap-table's data-formatter seems to use global functions (i.e. defined in window).

    This should work :

    window.acciones = function () {
      return '<a href="/user:id">Edit</a>';
    };
    

    NOTE: I don't think bootstrap-table is compatible with Angular. I wouldn't recommend to use a jQuery plugin in this kind of environment.