Flash animation of the table row that has been edited

coderx

I was just experimenting with some styles and found out that DataTables animate the table row that has been edited, as suggested in this post and it works in this example.

But when I want to use server-side processing serverSide: true, the flash animation does not work anymore.
It does not work even in the example Server-side processing.

Could you please advise?

Peter

allan

It doesn't work with server-side processing because the row that was updated gets removed and replaced when the table is redrawn. The server-side processing request will always cause new DOM nodes to be drawn.

The only way I can think of to make that flash work with server-side processing enabled would be to have an event listener on the draw event, know which row(s) were updated and then flash them.

I've added a bug for this to my tracker, but I can't say for certain when it will be done I'm afraid.

Allan

coderx

I understand, thank you for the info.

Peter

tangerine

FWIW, I have this code for dealing with "which row just got edited":

// Highlight the row last updated.
editor.on( 'postEdit', function ( e, json, data ) {
    // Get DataTables' unique identifier for the row just edited.
    var id =  data.DT_RowId;
    oTable.one( 'draw', function () {
        var tr = oTable.row( '#'+id ).node();
        $(tr).addClass('last-update');
    });
});

It's not animated - I just want the color change to sit there.

coderx

tangerine, thank you for the example! The only difference would probably be in $(tr).addClass('last-update');, right?

editor.on( 'postEdit', function ( e, json, data ) {
  // Get DataTables' unique identifier for the row just edited.
  var id =  data.DT_RowId;
  oTable.one( 'draw', function () {
    var tr = oTable.row( '#'+id ).node();
    $(tr).toggle( "highlight" ); // Probably the only diffence.
  });
});

Is there any DataTables function for the flash animation or is it ok to use jQuery $(tr).toggle( "highlight" ); Highlight Effect?

allan

There isn't an exposed function for it, but this is the code that Editor uses to do its flash:

    setTimeout( function () {
        node.addClass( 'highlight' );

        setTimeout( function () {
            node
                .addClass( 'noHighlight' )
                .removeClass( 'highlight' );

            setTimeout( function () {
                node.removeClass( 'noHighlight' );
            }, 550 );
        }, 500 );
    }, 20 );

Allan

coderx

Allan, thank you for this additional information.

So, from the very useful comments everyone could make solution easily, but I will post one anyway:

editor = new $.fn.dataTable.Editor( { ... } );

// Highlight the row last updated.
editor.on( 'postEdit', function ( e, json, data ) {
  
  // Get DataTables' unique identifier for the row just edited.
  var id =  data.DT_RowId;
  
  table.one( 'draw', function () {
    var tr = table.row( '#'+id ).node();

    setTimeout( function () {
      $(tr).addClass( 'highlight' );

      setTimeout( function () {
        $(tr)
          .addClass( 'noHighlight' )
          .removeClass( 'highlight' );

          setTimeout( function () {
            $(tr).removeClass( 'noHighlight' );
          }, 550 );
      }, 500 );
    }, 20 );
  });
});

var table = $('#example').DataTable( {
  ...
  serverSide: true,
  ...
} );

One more time thank you both for the great help!