4

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.

beaver
  • 17,333
  • 2
  • 40
  • 66
max
  • 9,708
  • 15
  • 89
  • 144

2 Answers2

8

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.

Daniel
  • 717
  • 6
  • 21
1

Not 100% sure how you're handling the search, but most likely the callback is reloading your bootstrap table with its original bootstrap styling without the background-color:yellow attribute you added in Javascript.

You can either set the style attribute again through javascript on submit,

$('#yourform').on('submit', function () {
    $('td[data-rowcolor]').attr("style", "background-color:yellow;");
})

which should style your table again after the submit goes through and the grid is reloaded

OR

Try adding !important to your css style:

.td {
    background-color: yellow !important;
}

Your styling without '!important' is most likely being overriden by bootstrap's css. But using the !important should prioritize your css over bootstrap's. The styling should still be there even after you reload the grid as well.

Eric Nam
  • 21
  • 4
  • I'm using the bootstrap search function so it does not submit a form. It's just a bootstrap javascript code that removes the rows that do not match as you type. Maybe I should set the color in the onSearch callback. – max Feb 21 '18 at 23:34