bootstrap-table - how to set table row background color

max picture max · Feb 21, 2018 · Viewed 9.8k times · Source

I'm using bootstrap table. If I set the color in the style attribute, it gets removed by bootstrap-table, so what I've done is I added an attribue like "data-rowcolor" and then used a javascript to apply the color:

$('td[data-rowcolor]').attr("style", "background-color:yellow;");

The problem with this approach is that when I use the search box to filter things, the colors disappear. Any ideas how to be able to set the color without losing it?

Maybe I should set the color in the onSearch callback but I'm not sure how it works. I've seen the doc.

Answer

Daniel picture Daniel · Feb 22, 2018

If you are using bootstrap table, why not do it the "bootstrap table" way?

Row style set this way will be maintained when using search box to filter etc.

Use the Table option rowStyle:

The row style formatter function, takes two parameters: row: the row record data. index: the row index. Support classes or css. Example usage:

function rowStyle(row, index) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}

Check out the jsFiddle here.