Answers

• Taylor514ce Posts: 74Questions: 8Answers: 0

  July 2017

  I guess I copy the contents of my downloaded theme's jquery-us.css file into the datatables.css file? Anything else needed to incorporate the new style? Do I need to edit the datatables.js as well?
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  July 2017 Answer ✓

  That should be it. I don't think you should need to modify the Javascript files - they should be using the jQuery UI theme generic class names.

  Allan
• Taylor514ce Posts: 74Questions: 8Answers: 0

  July 2017

  After swapping out the downloaded CSS with the JQuery UI Redmond Themeroller CSS, all is almost working. The alternative row colors associated with the .even and .odd classes are not working. My entire table background is white and stays white, with no alternating and the various sorting classes also ignored.
• Taylor514ce Posts: 74Questions: 8Answers: 0

  July 2017

  Update: the issue is unrelated to the "redmond" theme. I have the same issue with the default "orange" theme from the download builder.

  Table Row background colors do not alternate.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  July 2017

  The jQuery UI themes don't have anything in them for the zebra striping of table rows. So that is something which has to be provided by the DataTables / jQuery UI stylesheet.

  You'd need to modify the row colours in the DataTables / jQuery UI stylesheet as such.

  Allan
• Taylor514ce Posts: 74Questions: 8Answers: 0

  July 2017

  Allan,

  This was certainly working before using JQuery UI themes... perhaps I did extensive editing of the CSS in the previous version, I truly don't recall.

  I do see these style entries in the CSS, are they not active? The .odd and .even classes are being applied to my table rows.

  table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    background-color: #f9f9f9;
  }
  table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
    background-color: #acbad4;
  }
  table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
    background-color: #f6f6f6;
  }
  table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
    background-color: #aab7d1;
  }
  table.dataTable.order-column tbody tr > .sorting_1,
  table.dataTable.order-column tbody tr > .sorting_2,
  table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
  table.dataTable.display tbody tr > .sorting_2,
  table.dataTable.display tbody tr > .sorting_3 {
    background-color: #fafafa;
  
  
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  July 2017 Answer ✓

  Do you have the display or stripe class on the table?

  Allan
• Taylor514ce Posts: 74Questions: 8Answers: 0

  July 2017 edited July 2017

  No sir:

  <table id="tblServerLog" class="dataTable no-footer" role="grid" style="width: 100%;">

  That's the rendered tag. Based on your previous response, I reviewed my older version and saw that I did override some CSS with this:

  table.dataTable tr.odd { background-color: #E2E4FF; }
  table.dataTable tr.even { background-color: white; }
  
  table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
  table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
  table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
  table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
  table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
  table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
  

  That works, but for the purposes of learning, I'm curious why the built-in styles aren't being applied.

  EDIT: Applying class="stripe" to my table resolved the issue, and I removed my own style entries shown above. Thank you!