Can I set background colors to specific rows?
Can I set background colors to specific rows?
lcamaj
Posts: 4Questions: 1Answers: 0
Hello, I am using the latest version of DataTables (with bootstrap 5), and I was wondering whether I could set the background color of a specific row based on a function? I could do this with older versions, so I assume it is possible (though some of the specifics may have changed). Here is what my code looks like:
$('#billing-review-table').DataTable({
destroy: true,
responsive: true,
paging: false,
searching: false,
info: false,
scrollY: "65vh",
scrollX: true,
scrollCollapse: true,
autoWidth: true,
initComplete: function() {
applyRowStyles();
}
});
function applyRowStyles() {
let tdCounter = 0;
$('#billing-review-table tr td').each(function () {
if ($(this).text() == '' && tdCounter === 1) {
$(this).closest('tr').css({
'background-color': '#DCDCDC',
'font-weight': 'bold'
});
// $(this).closest('tr').css('font-weight', 'bold');
}
tdCounter = ((tdCounter + 1) % 13);
});
$('#billing-review-table tr td').each(function () {
if ($(this).text() == '' && tdCounter === 0) {
$(this).closest('tr').css({
'background-color': '#91D1FF',
'font-weight': 'bold'
});
// $(this).closest('tr').css('font-weight', 'bold');
$(this).text('SYSTEM TOTAL');
}
tdCounter = ((tdCounter + 1) % 13);
});
}
I do see the row is set to bold and the font-background is set when I open the page in a browser, but I do not visually see the difference in color (all rows are white so this change should be noticeable). Any help on this matter is much appreciated!
Answers
It seems like you code snippet works in this test case - I modified the mod value to 6 for the number of columns:
https://live.datatables.net/sasuvaxe/1/edit
If this doesn't work for you then there is likely something overriding the styles you are applying. You can right click and inspect the
trelements to see if anything is overriding the applied styles.If you still need help then please provide a link to your page or a test case replicating the issue so we can help debug. You can update my test case if you wish.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I found out that it has to do with the 'table' class set in the 'table' tag. As mentioned, I am using bootstrap 5, so I am not sure exactly why this poses an issue?
Here is the updated code including bootstrap 5 (and two versions of the
<
table> tag: one with the table class and one without): https://live.datatables.net/sasuvaxe/3/edit
Thanks for the test case. That helps to understand what you have. Looks like the Bootstrap CSS variable
--bs-table-bgis applying the style. I removed it and now the CSS you are applying works:Did you upgrade to BS 5.3 along with upgrading Datatables?
Looking at this SO thread it looks like you need to override the variable. Something like this:
https://live.datatables.net/sasuvaxe/5/edit
Note that I used the Download Builder to get the Datatbables Bootstrap 5 integration files to use in the test case.
Kevin
Thank you! Changing it from background-color to --bs-table-bg worked! Very weird I had to do this, but it worked!