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.

1
  • Why not sharing a fiddle?
    – beaver
    Feb 22, 2018 at 7:02

2 Answers 2

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.

0
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.

1
  • 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, 2018 at 23:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.