0

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

2
  • Muestra tu configuración de datatable.
    – farsSharp
    Commented el 22 sept. 2018 a las 18:06
  • @AaronRomero listo
    – bypabloc_
    Commented el 22 sept. 2018 a las 18:12

1 respuesta 1

0

En tu configuración del render agrega los tags desde el div para el switch.
Para indicar el valor es con la propiedad de checked del input.

"render": function ( data, type, row ) {
        let boton = '<div>';
            boton += '<label class="switch">';
            boton += '<input type="checkbox" cheked=' + data +' >';
            boton += '<span class="slider"></span>';
            boton += '</label>';
            boton += 'Switch3';
            boton += '</div>';
        return boton;

Y no olvides agregar la referencia de estilos del switch.
Quien hace la parte visual del switch es este css.

.switch input { 
    display:none;
}
.switch {
    display:inline-block;
    width:60px;
    height:30px;
    margin:8px;
    transform:translateY(50%);
    position:relative;
}

.slider {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:30px;
    box-shadow:0 0 0 2px #777, 0 0 4px #777;
    cursor:pointer;
    border:4px solid transparent;
    overflow:hidden;
     transition:.4s;
}
.slider:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    background:#777;
    border-radius:30px;
    transform:translateX(-30px);
    transition:.4s;
}

input:checked + .slider:before {
    transform:translateX(30px);
    background:limeGreen;
}
input:checked + .slider {
    box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label>
        Switch1
    </div>
    <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label>
        Switch2
    </div>
    <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label>
        Switch3
    </div>
</div>

6
  • No carga el estilo. ¿ Y no olvides agregar la referencia de estilos del switch ?
    – bypabloc_
    Commented el 22 sept. 2018 a las 18:30
  • También esta la referencia al estilo :/
    – bypabloc_
    Commented el 22 sept. 2018 a las 18:38
  • Entonces sí todo está correcto como mencionas. Inspecciona tu HTML. Revisa cual regla le está pegando al css del switch.
    – farsSharp
    Commented el 22 sept. 2018 a las 18:51
  • Recuerdo que esto mismo me paso cuando trabajaba con jQuery, y llamaba una función que le daba estilo a todos los checkbox en el initComplete , desconozco como lo podría hacer en Angular.
    – bypabloc_
    Commented el 22 sept. 2018 a las 18:54
  • Eso pasa debido a los selectores en tabla. Debes de asignarle algún id para que no se aplique el evento a todos.
    – farsSharp
    Commented el 22 sept. 2018 a las 19:02

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.