row().scrollTo() not working

jfr

Hi
I am trying the example for scrollTo and does not seem to work
https://datatables.net/extensions/scroller/examples/initialisation/api_scrolling
It should point to record 1000 but does not move

Having the same problem with my program

Thanks
JF

colin

Hi @jfr ,

Good spot - apologies for that. We're looking at it now and will update when fixed,

Cheers,

Colin

allan

Hi,

Committed the fix and it will be in the nightly shortly.

Thanks!
Allan

diegoponciano

I am having this issue with scroller version 1.5.1 it simply does not move. Code:

                var table = $('#table').DataTable({
                    "paging": true,
                    "pageLength": 15,
                    "order": [],
                    "scrollX": true,
                    "scrollY": true,
                    scroller: true,
                });

data is on DOM

I am attempting:

table.row(8).scrollTo();

but nothing

colin

Hi @diegoponciano ,

That's right, that's the problem in the OP. This is now fixed, but not yet released, so you'll need to grab one of the nightly builds to get the fix. Apologies for the inconvenience,

Cheers,

Colin

puffster

Hi team,

I'm also having an issue with ScrollTo, as with the posters above it just seems to sit there at the top of the table. I just downloaded the latest version of datatables, so I'm on version 1.10.18.

My function to load the table, initialize it, and scrollTo are all in the same function and look like below. I've even tried moving the scrollTo outside of the function, wrapping the getData() function inside a $.when.done, and then calling scrollTo, and it still didn't help.

function getData() {
    var param = { pageID: pageID }

    return $.ajax({
        type: "POST",
        contentType: "application/json; charset=UTF-8",
        url: "WebServices/attData.asmx/getWeeklyMonitoringByArea",
        data: JSON.stringify(param),
        dataType: "json",
        success: function (response) {
            var wm = response.d;
            var firstActive = true;
            var rowIdx = 0;

            if ($.fn.DataTable.isDataTable('#tblWM')) {
                $('#tblWM').DataTable().clear().destroy();
            }

            var dt = $('#tblWM').DataTable({
                paging: false,
                info: false,
                sort: false,
                scrollX: true,
                scrollY: '60vh',
                scrollCollapse: true,
                dom: 'Brt',
                buttons: [
                    'copyHtml5', 'excelHtml5', 'pdfHtml5', 'print'
                ],
                data: wm,
                columns: [
                    {
                        data: "endDate",
                    },
                    {
                        data: "location",
                    },
                    {
                        data: "enrollment",
                        render: function (data, type, row, meta) {
                            data = formatNumberWithCommas(data);

                            return data;
                        }
                    },
                    {
                        data: "backpackPct"
                    },
                    {
                        data: "ttlEvents",
                        render: function (data, type, row, meta) {
                            data = formatNumberWithCommas(data);

                            return data;
                        }
                    },
                    {
                        data: "sspTotal",
                    },
                    {
                        data: "sspECE",
                    },
                    {
                        data: "studentAttPct",
                    },
                    {
                        data: "chronicAbsencePct",
                    },
                ],
                createdRow: function (row, data, dataIndex) {
                    if (data.active == 1) {
                        $(row).find('td').addClass('activeRow');
                    }

                    if ((data.currentWeek == 1) && (firstActive)) {
                        rowIdx = dataIndex;
                        firstActive = false;
                    }
                }
            });

            dt.row(rowIdx).scrollTo();
        }
    });
}

colin

Hi @puffster ,

There was an outstanding issue for this, which was fixed this afternoon and will be available in the nightly build from tomorrow. You can find the nightly releases here.

Please could you try this again next week with that build and let us know if it addresses your issue.

Cheers,

Colin

puffster

Apologies for taking so long to get back on this...I'm using the nightly releases but it's still not working. It's entirely possible that I'm doing something incorrect.

Here's my calls to the nightly release:

    <link rel="stylesheet" href="https://nightly.datatables.net/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://nightly.datatables.net/buttons/css/buttons.dataTables.min.css" />
    <link rel="stylesheet" href="https://nightly.datatables.net/responsive/css/responsive.dataTables.min.css" />
    <link rel="stylesheet" href="https://nightly.datatables.net/scroller/css/scroller.dataTables.min.css" />

    <script src="https://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="https://nightly.datatables.net/buttons/js/dataTables.buttons.min.js"></script>
    <script src="https://nightly.datatables.net/buttons/js/buttons.flash.min.js"></script>
    <script src="https://nightly.datatables.net/buttons/js/buttons.html5.min.js"></script>
    <script src="https://nightly.datatables.net/buttons/js/buttons.print.min.js"></script>
    <script src="https://nightly.datatables.net/responsive/js/dataTables.responsive.min.js"></script>
    <script src="https://nightly.datatables.net/scroller/js/dataTables.scroller.min.js"></script>

And my javascript...the rowIndex & datatable both are showing correctly in the console.log:

var pageID = "91";
var rowIdx = 0;
var dt;

$(document).ready(function () {
    //getUserSelectedLocation();
    $.when(getData()).done(function () {
        console.log(dt);
        dt.row(rowIdx).scrollTo();
    })
});

function getData() {
    var param = { pageID: pageID }

    return $.ajax({
        type: "POST",
        contentType: "application/json; charset=UTF-8",
        url: "WebServices/attData.asmx/getWeeklyMonitoringByArea",
        data: JSON.stringify(param),
        dataType: "json",
        success: function (response) {
            var wm = response.d;
            var firstActive = true;

            if ($.fn.DataTable.isDataTable('#tblWM')) {
                $('#tblWM').DataTable().clear().destroy();
            }

            var lastWeek = wm[0].endDate;
            var colorClass = '';

            dt = $('#tblWM').DataTable({
                paging: false,
                info: false,
                sort: false,
                scrollX: true,
                scrollY: '60vh',
                scrollCollapse: true,
                dom: 'Brt',
                buttons: [
                    'copyHtml5', 'excelHtml5', 'pdfHtml5', 'print'
                ],
                data: wm,
                columns: [
                    {
                        className: "text-strong",
                        data: "weekOf",
                    },
                    {
                        className: "text-strong",
                        data: "location",
                    },
                    {
                        data: "enrollment",
                        render: function (data, type, row, meta) {
                            data = formatNumberWithCommas(data);

                            return data;
                        }
                    },
                    {
                        data: "backpackPct"
                    },
                    {
                        data: "ttlEvents",
                        render: function (data, type, row, meta) {
                            data = formatNumberWithCommas(data);

                            return data;
                        }
                    },
                    {
                        data: "sspTotal",
                    },
                    {
                        data: "sspECE",
                    },
                    {
                        data: "studentAttPct",
                    },
                    {
                        data: "chronicAbsencePct",
                    },
                ],
                createdRow: function (row, data, dataIndex) {
                    if (lastWeek != data.endDate) {
                        (colorClass == '') ? colorClass = 'altColor' : colorClass = '';
                    }

                    $(row).addClass(colorClass);
                    lastWeek = data.endDate;

                    if (data.active == 1) {
                        $(row).find('td').addClass('activeRow');
                    }

                    if ((data.currentWeek == 1) && (firstActive)) {
                        rowIdx = dataIndex;
                        firstActive = false;
                    }
                }
            });
        }
    });
}

I hope it's something I'm not doing right!!

colin

Hi @puffster ,

There's a lot of code there. It's working in this example here - could you modify that example to demonstrate your problem, or could you link to your page.

Cheers,

Colin

velagac

Hi @colin

I am also trying to achieve same thing as @puffster. The example you have posted is not working if paging is set to false and do I need to set scroller="true" to make scroll to row work?

kthorngren

The example you have posted is not working if paging is set to false

The Scroller docs indicate paging must be enabled with this comment:

making use of the pagination abilities of DataTables and moving the table around in the scrolling container

do I need to set scroller="true" to make scroll to row work?

Yes, row().scrollTo() is a Scroller extension API. It looks like that is the problem with @puffster 's code. The Scroller extension was loaded but doesn't look like it was enabled.

Kevin

velagac

@kthorngren Is there any way to scroll to specific row without setting scroller=true?

colin

Hi @velagac ,

No, row().scrollTo() needs scroller. This SO thread looks there's an alternative solution for you,

Cheers,

Colin

velagac

@colin, thanks. Just used similar solution to fix my problem.