Styling cell when its column is used in sorting
Styling cell when its column is used in sorting
NoBullMan
Posts: 61Questions: 17Answers: 2
in DataTables
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I am trying to conditionally style a couple of cells and for most part it works fine but there was one cell that would not play nice.
When I inspected the element in Chrome, I noticed its class, in addition to my custom class, had "sorting_2" class. When I removed it, then style was applied. This is how it showed in Chrome
<td class="duplicateBincode sorting_2">86160</td>
This is how I am styling the cells/rows:
tblOpenBins = $("#openBinsTable").DataTable({
jQueryUI: true,
data: [],
order: [[3, 'asc'], [1, 'asc'], [10, 'desc']],
...
rowCallback: function (row, data, index) {
...
...
if (data.BINCODE_COUNT > 1) {
$('td:eq(1)', row).removeClass('alertRow').addClass('duplicateBincode'); // This row is used in sorting
$('td:eq(2)', row).removeClass('alertRow').addClass('duplicateBincode'); // This is fine
}
},
...
});
I also tried unsuccessfully to style this in columnDefs as:
{
targets: [1,2],
createdCell: function (td, cellData, rowData, row, col) {
if (rowData[22] > 1) { // This is where BINCODE_COUNT is
$(td).removeClass('alertRow').addClass('duplicateBincode');
}
}
}
As I mentioned, when sorting class is removed it works fine.
Answers
If you could link to a test case showing the issue, I can take a look at it.
Allan
It might depend on what selector your CSS is using. This example works regardless of whether sorting is applied to the column or not.
https://live.datatables.net/cayajoho/1/edit
The
sorting_xclasses are applied to the sorted columns. The behavior might be different if using a styling framework. Its possible theorder-columnclass might be intereferring. See the default table styling classes for more info.If you still need help please post a link to your page or a test case showing the problem so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Thanks Allan. It is a corporate app, no outside access. I will try to create a sample page to show the issue.
The only way I could fix this issue quickly was to add "!important" to "td.duplicateBincodes" class's background style.
I see in Chrome, when I inspect the problem cell, that the background color is crossed out; not sure what is overwriting it.
If you scroll down the styles, it will probably show a selector which is more specific and thus overriding it.
If you'd like us to take a look, we would indeed need a test case showing it please. Good to hear you've got a workaround though.
Allan