1

Intento añadir una clase a una columna sin tener que afectar el header pero, no he podido lograrlo, he intentado varias cosas como.

Esto lo dice la API

"createdRow": function( row, data, dataIndex ) {
    if ( data[5] == "1" ) {
        $(row).addClass('badge badge-success');
}}

Esta segunda es la que estoy usando y afecta a toda la columna pero solo quiero que afecte a los td:

"columnDefs": [
    {
       targets: 5,
       className: 'badge badge-success',
    }
],

Este es el resultado:

introducir la descripción de la imagen aquí

3 respuestas 3

0

Para trabajar solo con las celda de datos utiliza la función de createdCell(); Donde esta te permite manipular desde el tag de td.

columnDefs: [ {
    targets: 5,
    createdCell: function (td, cellData, rowData, row, col) {
       if ( cellData < 1 )
        $(td).addClass('badge badge-success');
    }
  } ]

Para no afectar el header, cellData es el indice de cuando renderiza; escapalo.

3
  • Está información ah servido, me quedo con la que comentaste antes de editar. Commented el 23 oct. 2018 a las 21:24
  • Va, entonces la regreso
    – farsSharp
    Commented el 23 oct. 2018 a las 21:25
  • Pude probar gracias a esto, otra opción, no se si sea buena práctica pero me sirvio. {data: 'status', orderable: false, render: function(data, type, row) { if ( data == 1 ) { return '<span class="badge badge-success">'+data+'</span>' } else { return '<span class="badge badge-danger">'+data+'</span>' } } }, Commented el 23 oct. 2018 a las 21:41
0

Intentalo con rowCallback asi:

$("#table").DataTable({
  'rowCallback': function(row, data, index){
    console.log(data[4]);
    if(data[4] == "1"){
      $(row).find('td:eq(4)').addClass('badge badge-success');
    }
  }
});
.badge {
  background-color: green;
}
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>

9
  • Lo he intentado también en otra oportunidad pero, tampoco funciona, no añade nada. Commented el 23 oct. 2018 a las 20:17
  • A mi si me funciona, ya edite mi respuesta.
    – alanfcm
    Commented el 23 oct. 2018 a las 20:29
  • No entiendo que tengo mal entonces. Esté es mi código: js.do/code/252401 Commented el 23 oct. 2018 a las 20:35
  • Si pones el console.log puedes ver los datos?
    – alanfcm
    Commented el 23 oct. 2018 a las 20:36
  • Me dice que es undefined Commented el 23 oct. 2018 a las 20:41
-1

SI SE TRABAJA CON DATOS CARGADOS DESPUES (como puede ser base de datos) la funcion se trabaja asi; por ejemplo en mi caso:

"rowCallback": function( row, data ) {
                if ( $('td:eq(5)', row).text() == "devolviendo") {
                  $('td:eq(5 )', row).addClass( 'clase_1' );
                }else if ( $('td:eq(5)', row).text() == "libre") {
                    $('td:eq(5 )', row).addClass( 'clase_2' );
                }
              }

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.