DataTables logo DataTables

Highlight Row (with Column Sorting Enabled)
  • Hello All,

    I am trying to get “row highlighting” to work and although I can get close to a solution, I can’t seem to get it to work.

    I have seen this example, http://www.datatables.net/examples/api/highlight.html, but I only want to highlight rows, not columns.

    What I have done so far is add these type style classes:
    tr.even:hover {
    	background-color: #ffff99;
    }
    tr.odd:hover {
    	background-color: #ffff99;
    }

    At first glance this works great and highlights the row on hover.

    The problem is that if I then sort a column, the sorted column TD’s take on a new style class (sorting_1). So, in my 4 column table, when I mouse over a row, only 3 of the columns highlight, which looks silly.

    I tried to get crafty (with “tried” being the key word!), and created these style classes:
    tr.odd td.sorting_1:hover {
    	background-color: #ffff99;
    }
    tr.even td.sorting_1:hover {
    	background-color: #ffff99;
    }

    This sort of gets me closer to a solution, but not exactly. Now, when a column is sorted, if I mouse-over the sorted TD, then the whole row highlights. But, if I put my cursor in one of the other columns, it no longer highlights that sorted TD and I’m back to the whole 3 out of 4 columns in my row highlight issue.

    I realize this is because I have the ‘hover’ tag on the TD, which is why it only works if the mouse is over that TD.

    I’m sure there is a way to get this to work, but I’m stumped.

    Any ideas? Thanks in advance!
  • I think you are very close with your solution - but rather than having the :hover selector on the td, have it on the tr. Remember CSS is 'cascading' so it would be tr.even:hover td.sorting_1 {} etc. You can get a bit 'cute' and use the sorting column (or even multiple sorting columns) with slightly different colours to highlight that they are being sorted on still. I just tried using the following which did the trick in my examples:

    #example tr.even:hover {
    	background-color: #ECFFB3;
    }
    
    #example tr.even:hover td.sorting_1 {
    	background-color: #DDFF75;
    }
    
    #example tr.odd:hover {
    	background-color: #E6FF99;
    }
    
    #example tr.odd:hover td.sorting_1 {
    	background-color: #D6FF5C;
    }
    

    Regards,
    Allan
  • Thanks Allan, It worked for me as well. love you
  • I can't get this to work for me. I'm sure I'm missing something obvious (I'm a newbie). I've got your code, Allan, in my CSS file, and I've replaced "#example" with "#myTable" (where "myTable" is the ID of the table element in the DOM).

    I only get highlighting on a cell (not a row), and only after I've specifically clicked to sort that row. Otherwise, nothing.


    If it helps, my table sits in a div that is hidden at first. When a user clicks a button, the div becomes visible, and I use ajax to get all the data to generate the table.

    Thanks for any help you can provide.

    #example tr.even:hover {
        background-color: #ECFFB3;
    }
     
    #example tr.even:hover td.sorting_1 {
        background-color: #DDFF75;
    }
     
    #example tr.odd:hover {
        background-color: #E6FF99;
    }
     
    #example tr.odd:hover td.sorting_1 {
        background-color: #D6FF5C;
    }
    
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.