jQuery Datatables automatic scroll for details-control

Question

I am using jQuery Datatables and I want to know how to automatically scroll to show the details-control when it is pressed. If I click the last row of my table it will open the information but the user will never know to scroll down. Is it possible to have it automatically scroll to show the details when using details-control?

When the green plus sign is chosen it appears as so:

After you manually scroll it then appears:

Is it possible to have it automatically scroll for the user to see easier than having to manually scroll?

var someTable = $('#processing1').DataTable( {
        "columns": [ 
            {
                "class":          "details-control1",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "id" },
            { "data": "dealerID" },
            { "data": "Date_Received" },
            { "data": "op_id" },
            { "data": "Date_Due" },
            { 
              "data": "Date_Complete",
              "render": function(data){
              return ((data) ? "COMPLETED" : "PROCESSING");
              }
            },
            { "data": "Completed_Late" },
            { "data": "Closed_by" },
            { "data": "Rmks" },
            { "data": "Processing_Location" },
            { "data": "Item_Count" }
        ],
        "order": [[1, 'asc']],
        "columnDefs": [
            { "targets": [0,2,3,4,5,6,7,8,9,10,11], "searchable": false }
        ],
        "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
        select: {
            style: 'single'
        },
        scrollY:        250,
        deferRender:    true,
        scroller:       true,
        "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
        "iDisplayLength": 25,
        "oLanguage": {
            "sLengthMenu": "_MENU_ <label for='processing1_length'><strong>records per page</strong></label>",
            "oPaginate": {
                "sPrevious": "«",
                "sNext": "»",
            }
        }
    });

    // Array to track the ids of the details displayed rows
    var somedetailRows = [];

    $('#processing1 tbody').on( 'click', 'tr td.details-control1', function () {
        var tr = $(this).closest('tr');
        var row = someTable.row( tr );
        var idx = $.inArray( tr.attr('id'), somedetailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details1' );
            row.child.hide();

            // Remove from the 'open' array
            somedetailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details1' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                somedetailRows.push( tr.attr('id') );
            }
        }
    });

    // On each draw, loop over the `somedetailRows` array and show any child rows
    someTable.on( 'draw', function () {
        $.each( somedetailRows, function ( i, id ) {
            $('#'+id+' td.details-control1').trigger( 'click' );
        });
    });

I have added this plugin: https://github.com/flesler/jquery.scrollTo

but cannot figure out where to insert this code and what to replace object with.

var scroller = oTable.fnSettings().nTable.parentNode;                                               
$(scroller).scrollTo( object, 1 );

What does object need to be changed to?

EDIT

$('#processing1 tbody').on( 'click', 'tr td.details-control1', function () {
        var tr = $(this).closest('tr');
        var row = someTable.row( tr );
        var i = $(this).index() ;
        var idx = $.inArray( tr.attr('id'), somedetailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details1' );
            row.child.hide();

            // Remove from the 'open' array
            somedetailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details1' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                somedetailRows.push( tr.attr('id') );
                someTable.scroller().scrollToRow(i + 2);
            }
        }
    });

datatables.net/forums/discussion/2140/scroll-to-highlighted-row — hurricane
– hurricane, Commented Nov 3, 2015 at 14:49
Yes, you need to add scrollTo jQuery library. github.com/flesler/jquery.scrollTo — cr0ss
– cr0ss, Commented Nov 3, 2015 at 16:10
The object value can be replaced with anything you want to target (or scrollTo). Check out the documentation for the plugin to see all the options you have. You can target offsets, DOM elements, jQuery objects, etc. — radiovisual
– radiovisual, Commented Nov 3, 2015 at 16:52
@Vicki, use jQuery to get the index of the <tr> you clicked on, then you can use that to target your scroll. This will give you the effect of scrolling to the clicked on <tr>. Simple as that. — radiovisual
– radiovisual, Commented Nov 3, 2015 at 21:46

Community · Accepted Answer · 2017-05-23 10:32:38Z

2

NOTE: markpsmith's answer on this thread is correct and should get credit for it, my thoughts are merely an extension of his.

To solve your problem, you can:

1. Add the scroller plugin by linking to the these files in your document:

<script src="https://cdn.datatables.net/scroller/1.3.0/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.3.0/css/scroller.dataTables.min.css" />

2. Add the following option to your DataTable:

scroller: true

3. Add the following logic to the click handler of your `td` or `tr`

var i = $(this).index();
table.scroller().scrollToRow(i);

Click here to see a working demo.

NOTE: The DataTable plugin can be awkward when scrolling to table rows if more than one table row is open at a time. You can see what I mean by first clicking on a few rows without closing any of the open rows. Then, close all rows, then open only one row at a time (close all rows before opening another row). This is likely the behavior that you want, so you will need to write a few lines of code to ensure that only one row is open at a time.

Hope this helps!

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Nov 4, 2015 at 16:26

radiovisual

6,4681 gold badge30 silver badges42 bronze badges

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

1 Comment

Ravindra Gullapalli Over a year ago

In the above example, the ajax data is not coming now. Added static data from datatables.net/examples/data_sources/js_array. The new working link is - jsfiddle.net/ravindragullapalli/c6xm0rsb

markpsmith · Accepted Answer · 2015-11-03 17:57:16Z

Use the scroller extension. In the click event that expands the child records, get the index of the clicked row. You need to scroll to a row which is index + n, where n is the number of rows which would allow the child records to be visible.

var table = $('#example').DataTable({
    scroller:       true,
    scrollY:        400,
    scrollCollapse: false
});

This js fired whenever a row is clicked and makes the scroll happen - in your version it would be in the $('#processing1 tbody').on event

    $('tr').click(function(e){
        var i = $(this).index() ;
        table.scroller().scrollToRow(i + 2);
    });

Here is a jsfiddle which shows what I mean: jsFiddle

If you click on a row, the code gets the clicked index, adds 2 and then scrolls to the resulting index.

Collectives™ on Stack Overflow

jQuery Datatables automatic scroll for details-control

2 Answers 2

1. Add the scroller plugin by linking to the these files in your document:

2. Add the following option to your DataTable:

3. Add the following logic to the click handler of your `td` or `tr`

Click here to see a working demo.

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1. Add the scroller plugin by linking to the these files in your document:

2. Add the following option to your DataTable:

3. Add the following logic to the click handler of your td or tr

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

3. Add the following logic to the click handler of your `td` or `tr`