jQuery DataTables ScrollTo div

Question

I am using jQuery tables and am trying to figure out when you use details-control to have the table automatically scroll down to show the details when the green plus sign is clicked. I have tried calling the div to have it automatically scroll to the div. Will someone please tell me where I am going wrong. https://jsfiddle.net/nnb97rh9/3/

The problem is lower on the list if you click the plus sign some users might not know to scroll down and they will not see the "more information" that is provided.

References I have used:
https://datatables.net/forums/discussion/2140/scroll-to-highlighted-row
https://github.com/flesler/jquery.scrollTo
https://www.datatables.net/examples/server_side/row_details.html

function format ( d ) {
    // `d` is the original data object for the row
    return '<div class="slider">'+
        '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                '<td>Full name:</td>'+
                '<td>'+d.name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension number:</td>'+
                '<td>'+d.extn+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
            '</tr>'+
        '</table>'+
    '</div>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": 'https://api.myjson.com/bins/16lp6',
        scrollY:        250,
        deferRender:    true,
        scroller:       true,
        "columns": [
            {
                "class":          'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" },
            { "data": "extn", "visible": false }

        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var scroller = table.fnSettings().ntable.parentNode;
        var clickedIndex = $(this).index();

        if ( row.child.isShown() ) {
            // This row is already open - close it
            $('div.slider', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            } );
        }
        else {
            // Open this row
            row.child( format(row.data()), 'no-padding' ).show();
            tr.addClass('shown');

            $('div.slider', row.child()).slideDown();
           $(scroller).scrollTo( $("div.slider"), 1 );
        }
    } );
} );

Answer 1

If anyone comes here and wants to use the scrollTo jquery plugin, then here is a JSFIDDLE that works using that instead of scroller.

You just reference the data tables scroll body css class and scroll to the last tr. If you try reference it by the table id (in this case #example) it won't work for whatever reason.

$('.dataTables_scrollBody').scrollTo(tr);

As markpsmith points out scrollTo is a bit old and scroller is native to DataTables now, so if that works for you that is probably a better option.

Answer 2

As mentioned yesterday, you need to use the Datatables Scroller extension. The ScrollTo library that you're using it quite old, I'm not sure that it works with Datatables 1.10.

I've created a jsfiddle based on yours - this should be exactly what you need:

Your JSFIDDLE amended.

The important bit is here:

var current = tr.index();
table.scroller().scrollToRow(current);

Where current is the index of the clicked row. The table will scroll so the clicked row is at the top, and the expended section is fully visible.