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 );
        }
    } );
} );

markpsmith · Accepted Answer · 2015-11-04 15:38:16Z

1

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.

answered Nov 4, 2015 at 15:38

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael · Accepted Answer · 2018-01-10 01:04:32Z

0

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.

answered Jan 10, 2018 at 1:04

Michael

2,9753 gold badges29 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery DataTables ScrollTo div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related