DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

row().scrollTo() not working

row().scrollTo() not working

jfrjfr Posts: 71Questions: 24Answers: 0
in Scroller

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

Replies

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @jfr ,

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

    Cheers,

    Colin

  • allanallan Posts: 63,540Questions: 1Answers: 10,476 Site admin

    Hi,

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

    Thanks!
    Allan

  • diegoponcianodiegoponciano Posts: 1Questions: 0Answers: 0
    edited July 2018

    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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • puffsterpuffster Posts: 61Questions: 22Answers: 0

    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();
        }
    });
}
  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • puffsterpuffster Posts: 61Questions: 22Answers: 0

    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!!

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • velagacvelagac Posts: 3Questions: 0Answers: 0

    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?

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954
    edited January 2019

    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

  • velagacvelagac Posts: 3Questions: 0Answers: 0

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @velagac ,

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

    Cheers,

    Colin

  • velagacvelagac Posts: 3Questions: 0Answers: 0

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

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.