Replies

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  February 2010

  How about something like this:
  
  [code]
  .dataTables_length {
  float:left;
  height:2.5em;
  width:40%;
  }
  [/code]
  I've not got IE atm to test it, but you might have to add the height to .dataTables_filter as well.
  
  Regards,
  Allan
• eeyore145 Posts: 12Questions: 0Answers: 0

  February 2010

  Allan:
  
  Thanks that was the trick, playing the height CSS for the .dataTable_length. One more question for you. I've been using JQuery for several months and I've just started using DataTables. I have basically created my own Theme/CSS definition for this project. Basically I am hiding the filter, we don't really need it, and I am using the sort and paging - - all this works nicely. I have a specific style for my header row (thead th the column "headers") and basically I just want the end user to click on the column header (they get the pointer cursor through the CSS) to sort that column in ascending and descender order.
  
  I was wondering if you have done anything with the click events on column headers. My goal is, when a column header is clicked on or "sorted" in a particular manner the Column header COLOR changes - - it would go from white to a RGB shade of Orange. Then obviously, when a different column header is clicked the previous one which was clicked goes back to white, and that one goes to Orange
  
  Any ideas regarding the best way to do this and is it possible? Could I use JQUERY bind or live to intercept the onclick event of the th cell and set all others to color: white, $(this) to Orange? A more simpler approach through CSS?
  
  Thanks
• eeyore145 Posts: 12Questions: 0Answers: 0

  February 2010

  Hi Alan:
  
  Answering my own question, yes, through JQUERY live this was quite easy to accomplish
  
  [code]
  
  $("#couponListing th").live("click", function() {
  -set css color of $this
  -reset css color of $this.siblings()
  }
  
  [/code]
  
  Thanks again
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  February 2010

  Yup - that's certainly one option for doing it. Although I don't think it will work if you shift click (i.e. multiple column sort) on a header will it?
  
  A css solution is just to use the sorting classes given to the header: http://datatables.net/styling/ids_classes and http://datatables.net/styling/custom_classes . Using Firebug (etc) is a good way to see what is going on and how you can address the elements.
  
  Regards,
  Allan
• eeyore145 Posts: 12Questions: 0Answers: 0

  February 2010

  Hmmmm.....
  
  Allan, I am trying to use the CSS approach and I can't get the color of the Header to change. I'm not sure why. I have firebug open and I know the style is being used. For example in the FireBug window, I can change the font size and it updates immediately on screen so I know the style is being registered..for example
  
  [code]
  .sorting_asc { color: orange; font-size:15px}
  .sorting_desc { color: orange; font-size:15px}
  [/code]
  
  If I change font-size to be anything else, the font of the column header changes, etc.
  
  When I use JQUERY live and do $(this).css 'color' 'orange' it works fine, what am I doing wrong here? It would seem to me JQUERY live events are doing the same CSS manipulation, its the same css property. Through JQUERY I am doing [id] th traversing, not sure how its any different here. And from HTML view the class is being applied fine:
  
  [code]
  
  NameStart TimeEnd TimeStatusCoupon Code
  
  [/code]
  
  Notice I sorted on the "Name" column, and again only the Font-Size seems to be changing..
  
  Why is the TH header text not changing color? Any ideas?
  
  Thanks
• eeyore145 Posts: 12Questions: 0Answers: 0

  February 2010

  OK, I figured out how to make it work, but there another way to get this to work.
  
  I found with this definition, the color was being overriden, meaning the sorting_asc and sorting_desc color definition was being ignored, since the core "TH" definition of the element is "white"
  
  [code]
  table.display thead th {padding: 3px 18px 3px 10px;border-bottom: 1px solid black;font-weight: bold;cursor: pointer;background-color: #00447C;color:White;}
  [/code]
  
  So by default the DatTable rendering has white column header text and a shade of dark blue background
  
  I got my sorting color change to work by moving "color:White" into a generic thead definition
  
  [code]
  thead { color:White; }
  [/code]
  
  I'm not thrilled about this approach because I don't want this assigned to a generic thead element, I want these styles only in use within my DataTable CSS.
  
  Any better way to accomplish this? Also, why is this behavior occurring?
  
  Thanks
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  February 2010

  I think we are heading into the realms of CSS here, rather than DataTables (which is JS focused - the demo CSS is just provided as exactly that - a demo. It should be used and abused!) - but there is some relevance.
  
  Firebug is your friend for CSS selectors, it will show you what selectors are being used, and in what order, and what properties are being overwritten by more specific selectors. If you don't want thead { color:white }, then don't put it in, just make the selector more specific. You've got color:white in the table.display thead th, what selector is overrulling that? Can you change that selector etc. Have a play with Firebug and see what helps. Apparent from anything else, it's hard to debug css remotely!
  
  Regards,
  Allan