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

如何使用 DataTable 将 css 类添加到表行？

  • 772

我正在使用DataTable Jquery库创建表的行，并且我想为行添加样式，我以这种方式生成行。

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

上面的目的是当您输入else时，为整行添加不同的字体颜色，并以这种方式识别以状态输入的数据！= 1

javascript

3 Answers

  1. 您可以在 for 之前定义一个变量并根据条件给它（或不给它）一个值，最后获取当前行并使用 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

    最后我设法以这种方式添加了类，我留下下面的代码来为曾经有同样问题的人服务

            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. 添加信息的更实用的方法，只需使用 attr 方法在您想要的列中添加类。在 find('td').eq('你要实现的类或事件的列') 中搜索。

     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