Blog article 'Always shown checkbox' - row highlighting on AJAX submit success

jammy

In this blog article: http://editor.datatables.net/examples/api/checkbox.html when you click one of the checkboxes in the last column, the AJAX call is submitted via the editor, the success function fires and the data and row is updated. At that stage there is a faint yellow highlight that fades to show to the user that the change has been successful.

What is the code that deals with this highlight? I've just spent a couple of hours to implement my own version of this but it would be great if this sort of thing is built in, or at least it would be nice to compare implementations.

allan

What is the code that deals with this highlight?

It is in Editor itself:

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

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

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

It is a bit messy due to how CSS transitions work (which is what is doing the actual fade), but it works...

Allan

jammy

Funnily enough I was just going through the Editor js code and saw the calls to _dtHighlight!

Ahh. Now I've looked at the code I've re-realised why I implemented my own solution - I needed something that would page to the new record and highlight it. Currently, with this code, if you create a new record that is inserted on a page other than the one currently being displayed, there is no visual feedback to show the record was created.

Any plans to integrate a "jumpToDataAndHighlight" as part of the core Editor functionality?

allan

No current plans - although I'm not adverse to considering it for a future release as an option!

It would be possible to use the postCreate event to jump DataTables to the page that shows the newly inserted row as things currently stand.

Allan

jammy

Yea, I've hooked into the onCreate event, implemented the jumpToData plugin: http://www.datatables.net/plug-ins/api/page.jumpToData() and then wrapped that in a function which then also utilises jQuery's highlight effect (only because the dtHighlight doesn't seem to be exposed publicly).

The tricky part was getting the tr dom element for the newly created row, but managed it by doing:
$(table.fnSettings().aoData[ data.id - 1 ].nTr).effect("highlight", {}, 3000);

allan

Interesting one - that should probably be passed through to the event I think. Thanks - I'll look at adding that.

Allan