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>";
}
}
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.