Set the scroll position when datatables are created

su33161

I use drawCallback to set the scroll position of the child table.

"drawCallback": function (settings){
  $('div.dataTables_scrollBody').scrollTop(TOP);
},

But it doesn't work. Can you look at my code?
I succeeded in getting the scroll position, and I set the scroll position in CreateChild
However, the scroll position is not applied.

Parent table settings

$(document).ready(function () {

    $("a").button();

    var devEditor = new $.fn.dataTable.Editor({
        //skip
    });

    var childRows = null;

    var devTable = $("#deviceTable").DataTable({
        //skip
       "initComplete": function () {
            setInterval(function () {
                childRows = devTable.rows($('.shown'));
                scrollTop = {};
                
                let childrow = $('div.dataTables_scrollBody');
                $.each(childrow, function (index, v) {
                    let id = v.childNodes[0].id;
                    let top = $($(v)).scrollTop();
                    scrollTop[id] = top;
                });
                devTable.ajax.reload(null, false);
                //Server Request Code skip
            }, 3000);
        }
    });   

    $('#deviceTable tbody').on('click', 'td.fileName', function () {
        var tr = $(this).closest('tr');
        var row = devTable.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            destroyChild(row);
            tr.removeClass('shown');
            tr.removeClass('highlightExpanded');
        }
        else {
            // Open this row
            createChild(row, devTable.row(this).data().SN);
            tr.addClass('shown');
            tr.addClass('highlightExpanded');
        }
    });

    devTable.on('draw', function () {
        if (childRows) {
            //let rows = childRows;
            let rows = Object.assign({}, childRows);
            // Reset childRows so loop is not executed each draw
            childRows = null;
            rows.every(function (rowIdx, tableLoop, rowLoop) {
                var row = this;
                let top = 0;
                createChild(row, devTable.row(this).data().SN);
                this.nodes().to$().addClass('shown');
            });
        }
    });
});

child table settings

var scrollTop = [];

function createChild(row, id) {
    // This is the table we'll convert into a DataTable
    let ID = "child-" + id;
    var table = $('<table class="display" width="100%" id="{0}"/>'.format(ID));

    // Display it the child row
    row.child(table).show();

    var rowdata = row.data().detail;

    let TOP = scrollTop[ID];

    // Initialise as a DataTable
    var fileTable = table.DataTable({
        //skip
        "drawCallback": function (settings) {
            //console.log('scroll ' + top);
           //$('div.dataTables_scrollBody').scrollTop(TOP);
        }
    });
}


function destroyChild(row) {
    var table = $("table", row.child());
    table.detach();
    table.DataTable().clear();

    // And then hide the row
    row.child.hide();
}

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

su33161

I haven't made the sample code yet.
But $ ('.dataTables_scrollBody').ScrollTop confirmed success.

However, for some reason the value of scrollTop is zero again.
Can you tell me when to change the scrollTop value?