HTML Table Conditional Row Formatting

pwtm · 2024-10-03T22:14:17+00:00

There was an error rendering this rich post.

pwtm

I have implemented some conditional formatting using this code in an HTML table:

$(myTable).DataTable({

data: reorderedData,

lengthMenu: itemsPerPageOptions,

columns: colNames,

createdRow: function(row, data, dataIndex) {

var daysOld = data[0]; // Correctly reference the first column

if (daysOld == 1) {

$(row).css('background-color', 'lightyellow');

} else if (daysOld > 1) {

$(row).css('background-color', 'lightcoral');

}

});

It works except that the first column (daysOld) is not highlighted. I'm not sure why. What am I doing wrong?

Find more posts tagged with

Accepted answers

ArborRose

The issue appears to be how the datatables library handles rendering. It applies the styles after rendering the data, which appears to be causing it to skip the first column.

You can try applying the formatting during the drawCallback.

$(myTable).DataTable({

  data: reorderedData,

  lengthMenu: itemsPerPageOptions,

  columns: colNames,


  createdRow: function(row, data, dataIndex) {


    // This formatting applies during the row creation phase

    var daysOld = data[0]; // First column value (Days Old)


    if (daysOld == 1) {

      $(row).css('background-color', 'lightyellow');

    } else if (daysOld > 1) {

      $(row).css('background-color', 'lightcoral');

    }

  },



  // Add a drawCallback function to apply additional formatting

  drawCallback: function() {

    var table = $(myTable).DataTable();


    // Iterate through all rows to ensure formatting applies

    table.rows().every(function(rowIdx, tableLoop, rowLoop) {

      var data = this.data();

      var row = this.node();


      var daysOld = data[0]; // Get the value of the first column


      if (daysOld == 1) {

        $(row).css('background-color', 'lightyellow');

      } else if (daysOld > 1) {

        $(row).css('background-color', 'lightcoral');

      }

    });

  }

});

or target the specific cell in the first column rather than the row.

$(myTable).DataTable({

  data: reorderedData,

  lengthMenu: itemsPerPageOptions,

  columns: colNames,


  createdRow: function(row, data, dataIndex) {

    var daysOld = data[0]; // First column value (Days Old)


    // Apply background color to the first column (specific cell)

    var firstCell = $('td', row).eq(0); // Target the first column


    if (daysOld == 1) {

      $(row).css('background-color', 'lightyellow'); // Entire row

      firstCell.css('background-color', 'lightyellow'); // First column

    } else if (daysOld > 1) {

      $(row).css('background-color', 'lightcoral'); // Entire row

      firstCell.css('background-color', 'lightcoral'); // First column

    }

  }

});

All comments

ArborRose

$(myTable).DataTable({

  data: reorderedData,

  lengthMenu: itemsPerPageOptions,

  columns: colNames,


  createdRow: function(row, data, dataIndex) {


    // This formatting applies during the row creation phase

    var daysOld = data[0]; // First column value (Days Old)


    if (daysOld == 1) {

      $(row).css('background-color', 'lightyellow');

    } else if (daysOld > 1) {

      $(row).css('background-color', 'lightcoral');

    }

  },



  // Add a drawCallback function to apply additional formatting

  drawCallback: function() {

    var table = $(myTable).DataTable();


    // Iterate through all rows to ensure formatting applies

    table.rows().every(function(rowIdx, tableLoop, rowLoop) {

      var data = this.data();

      var row = this.node();


      var daysOld = data[0]; // Get the value of the first column


      if (daysOld == 1) {

        $(row).css('background-color', 'lightyellow');

      } else if (daysOld > 1) {

        $(row).css('background-color', 'lightcoral');

      }

    });

  }

});

or target the specific cell in the first column rather than the row.

$(myTable).DataTable({

  data: reorderedData,

  lengthMenu: itemsPerPageOptions,

  columns: colNames,


  createdRow: function(row, data, dataIndex) {

    var daysOld = data[0]; // First column value (Days Old)


    // Apply background color to the first column (specific cell)

    var firstCell = $('td', row).eq(0); // Target the first column


    if (daysOld == 1) {

      $(row).css('background-color', 'lightyellow'); // Entire row

      firstCell.css('background-color', 'lightyellow'); // First column

    } else if (daysOld > 1) {

      $(row).css('background-color', 'lightcoral'); // Entire row

      firstCell.css('background-color', 'lightcoral'); // First column

    }

  }

});

pwtm

Thanks! I'm going to give these a try.

Is this something that should be reported as an issue?

pwtm

I went with the second option. It works perfectly. Thanks!