Home / Questions / 13896
Accepted
Alan
Asked: 2020-06-15 07:23:38 +0800 CST 2020-06-15 07:23:38 +0800 CST

How to add css class to table row using DataTable?

  • 772

I am creating the rows of a table with the DataTable Jquery library and I want to add a style to a row, I generate the rows in this way.

      // 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);

The intention of the above is that when you enter the else add a different font color to the entire row and in this way identify the data that enters with the status != 1

javascript

3 Answers

  1. You can define a variable before the for and give it (or not) a value depending on the conditional, finally get the current row and add a class with 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);
    • 1
  2. Best Answer

    In the end I managed to add the class in this way, I leave the code below to serve someone who ever has this same question

            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

  3. a more practical way to add information, simply with the attr method you add the class in the column you want. searching inside find('td').eq('column you want to implement the class or event').

     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++;
});
    • 0