Alternating row colors don't work after page 1

pborregg

Allan, good morning. I finally got everything working nicely and man it looks good. I ripped out the details and used a MODAL detail when clicking on the rows. Suffice it to say, when I page next or any page after "1", the alternating row colors don't stick. Meaning, they're just not there... page 1 is fine.

Thoughts?

allan

Is your row striping done using the `odd` and `even` classes DataTables adds by default?

Beyond that, I'd need a test case.

Allan

pborregg

yes it is....

pborregg

I inspected element for all 365 rows and they are most definitely ODD/EVEN

allan

And the styles for the odd / even rows are in place?

There much be something overriding them if that is all correct. I'm afraid I can't even begin to guess what thought! The "Inspect element" option in your browser might give a clue.

Allan

pborregg

Thanks, I'll check into that and report back my findings

pborregg

This is what I have:

tbody tr.even td.gradeA {
background-color: #f5f6f6;
}

tbody tr.odd td.gradeA {
background-color: #ffffff;
}

allan

That's good if you have a `gradeA` class on your rows. Do you?

Do you not have just `tbody tr.odd` classes?

I could answer this in about 1 minute if you could link me to a test case.

Allan

pborregg

I do... look above... I pasted the CSS Styling

pborregg

Allan, I believe I found the problem. The alt rows are only being applied to the "first" 25 rows being displayed which is set with: iDisplayLength: 25.

But the balance of the 500 rows are not affected. If I change that value to say 50, then the first 50 rows are affected.

How can I applied row highlighting to ALL the rows whether they are displayed or not. Furthermore, when you sort (column header, single or multiple), How do I reapply the row highlighting so the rows are not bunched together by all odd or some even.

pborregg

Found it:

table.dataTable tr{ background-color: #ffffff; }
table.dataTable tr:nth-child(even) { background-color: #f5f6f6; }