jQuery DataTables: Simple Row Highlight Example CodeUnit 17 AUG 2010

I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement.

Today’s tip looks at how you can quickly and easily implement a visually helpful hover-based row highlight on any of your datatable objects.

First off, you will need to define a highlight rule to be applied to your table in your CSS declarations. In the simplest form, all you really want to do is define a unique background-color to the element wish you wish to highlight.

In CSS, this could look something like this:

.datatablerowhighlight {
	background-color: #ECFFB3 !important;

The next step is then to add our new highlight class to the row when the mouse hovers over it and then to remove it again when the mouse moves away. To do this we need to add bindings for the mouseenter and mouseleave jQuery events, where we add and remove the highlight class accordingly.

To do this, we piggyback into the handy fnDrawCallback function that is defined when initializing your datatable and which gets executed each time the datatable gets drawn.

Looking at this in code, you should now have:

$('#activitylog').dataTable( {
"fnDrawCallback": function(){
      $('table#activitylog td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); });
      $('table#activitylog td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('datatablerowhighlight');}); });
} );

Note how we grab the whole rows contents y first grabbing the parent element of the element we are currently hovering above, and then expanding to all that parent’s children elements – in other word the entire row. A simple addClass and removeClass call handles the actual attaching and detaching of the highlight CSS class.

Nifty, and pretty damn effective to boot! ;)

Related Link: http://datatables.net/

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don’t have time for myself any more.

  • Guest

    Is this any different then doing this in the CSS?

    tr:hover {background: #ECFFB3 !important; }

  • Not really, except it will work in IE, unlike the CSS tr:hover trick which only works in standards compliant browsers…

  • Anon

    How are you triggering the redraw of the table?

  • Daniel

    was useful to me…


  • So is it possible to highlight matching cells for the search/filter?  Let’s say I have First/Last name columns with rows: Will/Smith, Smith/Jones,John/Doe, Smith/Smith.  When I search “Smith” I would like to easily see what/what these rows matched.

    • Doesn’t a search/filter on a datatable only return the matching results? Or
      do you mean the specific cell should be highlighted to indicate what
      matched? I’m not sure, but if the matched cell is attached a unique class or
      id which we can match on, then I don’t see why it wouldn’t be possible.
      However, off the top my head, I’m pretty sure datatables doesn’t mark the
      matching column – just returns the matching rows based on passing a regex or
      sql query test.

  • GreenThumb

    Kickass Craig! Thanks for the advice on using the callback function, works perfect!

  • Sam

    thanks man! finally I get there, thanks for this post yours! thank god you post this! this is make me crazy all today…

  • Chuster Boy

    Hey Bro,Thnxs a lot…