Highlighting rows and columns on AJAX datatable

esteban.olm

Hi,

If you follow the instructions in

https://datatables.net/examples/api/highlight.html

it doen't work for AJAX datatable as the page loads new data and renders it on each server request, so the jquery selected elements and attached events are destroyed on each datatable ajax call.

I can not fin a "afterRender" funcion on the datatable so I could insert there the lines to attach events for the rows, something like this:

$(".dataTable tr.odd[role='row'], .dataTable  tr.even[role='row']")
    .on( 'mouseenter', function () {
                  //add higltlight class to th TR element
        } )
.on( 'mouseleave', function () {
                  //remove higltlight class to th TR element
        } );

¿Any help? Thanks in advance

kthorngren

The example code seems to work here with server side processing:
http://live.datatables.net/lehuhiyo/1/edit

Maybe you can update my test case with your code so we can help debug.

Kevin

kthorngren

Did you add the additional CSS code that is under the "CSS" tab of the example?

Kevin

colin

Hi @esteban.olm ,

Try this instead,

  $(".dataTable")
    .on( 'mouseenter', "tr.odd[role='row'], tr.even[role='row']", function () {
    //add higltlight class to th TR element
        } )
    .on( 'mouseleave', "tr.odd[role='row'], tr.even[role='row']", function () {
                  //remove higltlight class to th TR element
        } );

That should do the trick,

Cheers,

Colin