scrollToRow callbacks with ajax

squaregoldfish

I've got a data table that uses server side processing and the scroller extension.

I've got a piece of javascript that scrolls to a specific row in the table, and then I want to highlight it. At the moment, I've put the highlight code in the table's draw callback, so it happens after the new data has been downloaded and the table has been redrawn.

The problem is, if I only scroll by a row two, then no new data needs to be loaded and the draw callback is never called - in this case I don't get my highlight.

Is there a good way to get round this problem? The workaround I have in mind is to somehow find out whether my target row is already loaded. If it is, then I call the highlight myself, and if it isn't I leave it to the draw callback to take care of it. Or can I force the table to redraw and thus invoke the highlight? Or is there a better idea?

Thanks,
Steve.

squaregoldfish

I've just seen this buried in the documentation:

"Note that as of DataTables 1.10.6 the xhr event will be triggered when a function is used for ajax (even if there is no Ajax request). Prior to 1.10.6 no event would have been triggered."

I suspect this might be what I'm looking for. I can't test it right now, but I'll report back when I've tried it.

squaregoldfish

So the xhr event isn't what I'm looking for - it's not triggered if there's no ajax call to load more data. The search continues...

squaregoldfish

The only way I've been able to handle this is with a two-pronged approach.

First, I attached a listener to the scrollable table area:

$('.dataTables_scrollBody').scroll(function() {
    if (scrollEventTimer) {
        clearTimeout(scrollEventTimer);
    }
            
    scrollEventTimer = setTimeout(function() {
        highlightRow(tableScrollRow);
    }, 300);
});

• I only have one table in my page, so the jQUery selector only gives one match.
• I don't run the highlight function immediately, because the scroll event is triggered multiple times during scrolling. Instead I have a timer which is reset if a new scroll event is triggered. Plus it gives time for the display to catch up to the scroll before the highlighting is done.

This handles the case for short scrolls, when no extra data is loaded from the server. For the server case, I have the following in my table declaration:

ajax: function ( data, callback, settings ) {
    clearTimeout(scrollEventTimer);
    scrollEventTimer = null;

    // Ajax call javascript goes in here - not relevant to this discussion
},
drawCallback: function (settings) {
    highlightRow(tableScrollRow);
}

• In the ajax property, we remove the timeout from the short scroll handler above, since we're getting more data and need to delay the highlight until it's retrieved
• Instead, we call the highlight function in the drawCallback property, which is triggered once the data has been downloaded and the table is updated.

This seem to be the best approach for the question. I'm open to alternatives though.