3

Estoy creando las filas de una tabla con la librería DataTable Jquery y deseo agregar un estilo a una fila, las filas las genero de esta manera.

      // idTabla es una variable que la envió desde la vista **var idTabla = DataTable();**
            idTabla.row().clear();
            for (var i = 0; i < datos.length ; i++) {
                if (datos[i].estado == '1') {
                    var icon = "<i class='fa fa-check' id='loadState"+datos[i].id+"'></i>";
                }else{
                    var icon = "<i class='fa fa-ban' id='loadState"+datos[i].id+"'></i>";
                }
                //
                idTabla.row.add([
                                    datos[i].id,  
                                    datos[i].nombre,
                                    "<div class=' text-center col-md-12'><a href='#' id='editarObservacion"+datos[i].id+"' class=' ' onclick='activarDesActivarElect(\""+datos[i].id+"\", \"2\", \"loadState"+datos[i].id+"\", \""+id+"\", \""+datos[i].estado+"\")'> "+icon+" </a></div>"
                                ]);
            }
            idTabla.draw(true);

La intención de lo anterior es que cuando entre a el else agregue a toda la fila un color de letra diferente y de esta manera identificar los datos que entran con el estado != 1

3 respuestas 3

1

Puedes definir una variable antes del for y darle (o no) un valor según el condicional, por último, obtener la fila actual y agregar una clase con jQuery:

idTabla.row().clear();
var rowClass;        
for (var i = 0; i < datos.length ; i++) {
    if (datos[i].estado == '1') {
        var icon = "<i class='fa fa-check' id='loadState"+datos[i].id+"'></i>";
        rowClass = false;
    } else {
        var icon = "<i class='fa fa-ban' id='loadState"+datos[i].id+"'></i>";
        rowClass = true;
    }
    var currentRow = idTabla.row.add([
        datos[i].id,  
        datos[i].nombre,
        "<div class=' " + rowClass + " text-center col-md-12'><a href='#' id='editarObservacion"+datos[i].id+"' class=' ' onclick='activarDesActivarElect(\""+datos[i].id+"\", \"2\", \"loadState"+datos[i].id+"\", \""+id+"\", \""+datos[i].estado+"\")'> "+icon+" </a></div>"
    ]).node();

   if (rowClass) {
       $(currentRow).addClass('mi-clase');
   } 
}
idTabla.draw(true);
2
  • La verdad es muy ingenioso, pero mira el problema es que en ese caso solo le colocaria el estilo a la última columna de esa tabla, la fila se empieza a "dibujar" por decirlo de algún modo, aquí idTabla.row.add([ y los datos separados por coma(,) son los datos que van en cada columna, siendo el final de esta un div
    – Alan
    Commented el 14 jun. 2016 a las 15:41
  • He modificado mi respuesta.
    – Shaz
    Commented el 14 jun. 2016 a las 16:45
0

Al final logre agregar la clase de esta forma, dejo el código a continuación para que sirva a alguien que alguna vez tenga este mismo cuestionamiento

        idTabla.row().clear();
        for (var i = 0; i < datos.length ; i++) {
            if (datos[i].estado == '1') {
                icon = "<i class='fa fa-check' id='loadState"+datos[i].id+"'></i>";
            }else{
                icon = "<i class='fa fa-ban' id='loadState"+datos[i].id+"'></i>";
            }
            //
            idTabla.row.add([
                                datos[i].id,  
                                datos[i].nombre,
                                "<div class=' text-center col-md-12'><a href='#' id='editarObservacion"+datos[i].id+"' class=' ' onclick='activarDesActivarElect(\""+datos[i].id+"\", \"2\", \"loadState"+datos[i].id+"\", \""+id+"\", \""+datos[i].estado+"\")'> "+icon+" </a></div>"
                            ]);
            // agrego el idTabla.draw(true); dentro de el for
            idTabla.draw(true);
            if (datos[i].estado == '0') {
                // al parecer sorting_1 es una clase por defecto del plugin
                // allí encuentra un dato que contenga algo relacionado a la fila, en este caso es el id
                // utilizó parent() para asignarle una clase al "<td>" donde realiza lo que necesitaba
                $(".sorting_1:contains('" + datos[i].id + "')").parent().addClass('text-muted');
            }
        }
0

una forma mas practica de agregar informacion, simplemente con me metodo attr agregas la clase en la columna que deseas. buscando dentro de los find('td').eq('columna que deseas implementar la clase o evento').

 var counter = 0;

$('#addRow').click(function () {
    var curren = t.row.add([
        '',
        'x',
        '<input name="ceRol.listaVista[' + counter + '].descripcionLarga" type="text" value="' + counter + '" hidden />' + '<label>' + counter + '</label>',
        "<div style='text-align: center;'> <button type='button' class='add icon-detalle'>add</button> <button type='button' class='delete  icon-detalle'>del</button> </div>"
    ]).draw(false).node();

    $(curren).find('td').eq(0).attr({ 'class': 'details-control' });

    counter++;
});

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.