Tengo un datatables que carga una lista, en ella hay una columna estado, viene de la db como un boolean, quiero colocar un botón como este dependiendo del estado que tenga. Esta parte ya la hago, el problema es que no me carga el estilo.
Asumo que el datatables carga primero el contenido antes que el css, la idea seria insertar el css en el initComplete del datatables. Pero no encuentro como insertar el css en dicha parte.
this.dtOptions = {
ajax: {
url: this.url+'categorias/listar',
type: 'POST',
data: {
"json": [
{
nombre: this.categoria.nombre
},
{
status: this.categoria.status
}
]
}
},
columns: [
{
title: 'N°',
data: 0, searchable: false, orderable: false, render: function( data, type, full, meta ){
return meta.row+1;
}
},
{
title: 'Nombre',
searchable: false,
"render": function ( data, type, row ) {
return row.nombre;
}
},
{
title: 'Estado',
searchable: false,
"render": function ( data, type, row ) {
if(row.status){
return '<div> <label id="switch"> <input type="checkbox"> <span class="slider"></span> Activo </label></div>'
}else{
return '<div> <label id="switch"> <input type="checkbox"> <span class="slider"></span> Inactivo </label></div>'
}
}
},
{
title: 'Acción',
searchable: false,
orderable: false,
"render": function ( data, type, row ) {
let boton = '';
boton += '<div class="text-center">';
boton += '<span class="fa fa-edit" style="color:#FFBD00;" title="Editar"></span><span class="hidden-xs"></span>';
boton += ' ';
boton += '<span class="fa fa-trash" style="color:#FF0000;" title="Eliminar"></span><span class="hidden-xs"></span>';
boton += '<div>';
return boton;
}
},
],
order: [[1, 'asc']],
rowCallback: (row: Node, data: any[] | Object, index: number) => {
const self = this;
$('td', row).unbind('click');
$('td', row).bind('click', () => {
self.someClickHandler(data);
});
return row;
},
initComplete: function (settings, json) {
},
responsive: true,
select: true
};