Alternating row colors don't work after page 1

Alternating row colors don't work after page 1

pborreggpborregg Posts: 59Questions: 2Answers: 0
edited January 2014 in DataTables 1.9
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?

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Is your row striping done using the `odd` and `even` classes DataTables adds by default?

    Beyond that, I'd need a test case.

    Allan
  • pborreggpborregg Posts: 59Questions: 2Answers: 0
    yes it is....
  • pborreggpborregg Posts: 59Questions: 2Answers: 0
    I inspected element for all 365 rows and they are most definitely ODD/EVEN
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • pborreggpborregg Posts: 59Questions: 2Answers: 0
    Thanks, I'll check into that and report back my findings
  • pborreggpborregg Posts: 59Questions: 2Answers: 0
    This is what I have:

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

    tbody tr.odd td.gradeA {
    background-color: #ffffff;
    }
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • pborreggpborregg Posts: 59Questions: 2Answers: 0
    I do... look above... I pasted the CSS Styling
  • pborreggpborregg Posts: 59Questions: 2Answers: 0
    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.
  • pborreggpborregg Posts: 59Questions: 2Answers: 0
    Found it:

    table.dataTable tr{ background-color: #ffffff; }
    table.dataTable tr:nth-child(even) { background-color: #f5f6f6; }
This discussion has been closed.