File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataTables scroll test</title>
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.min.js"></script>
     
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.dataTables.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h3>
    Table has 45000 rows.  Scroll to row 44500 works fine.  44600 or 44700 scroll to wrong row, yet 44800 works fine.
</h3>
    <button>Scroll</button> to row
    <input id="row" type="number" style="width:60px;" value=44600 />
    <div>
        <table id="data_table" class="cell-border">
        </table>
    </div>
</body>
<script>
$(function () {
    var rows = [];
    for (var i=0; i < 45000; ++i) {
            rows.push( {row_index: i, alogp: (10.*Math.random()-5.0).toFixed(2)} );
    };
    var columns = [
        {name: "row_index", title: "row_index", data:"row_index"},
        {name: "alogp", title: "alogP", data:"alogp"}
    ];
    var dt = $("#data_table").DataTable({
        data: rows,
        columns: columns,
        scroller: true,
        scrollY: 400,
        scrollX: 200
    });
    $("button").click( function(event) {
        var row = $("#row").val();
        //dt.scroller.measure(); // has no effect on mis-scrolling to 44600
        dt.row(row).scrollTo(false);
    });
});
</script>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers