row index on scroller extension

row index on scroller extension

gfu14416gfu14416 Posts: 8Questions: 1Answers: 1

Hi,

The row index returned by $(this).index() (or $(dt.row(this).node()).index()) on a scroller datatable does not return the right index when the row is greater than certain number. However, it works correct without the scroller enabled. Any explanation ?

When you load the following test codes, scroll down to the end, and click any row, the indexes displayed (alert) are not the same, but they are the same if I use 'pageing:false, dom: "rti",' .

Thank,
Gary

code t.php

<?php

$output = <<<OUTPUT

<!DOCTYPE html>
<html>
<head>
    <title>TaskView</title>

    <link id = "theme" type ="text/css" rel="stylesheet" href="../..//css/jquery.dataTables.css" charset="utf-8" media="all">
    <link id = "theme" type ="text/css" rel="stylesheet" href="../..//css/dataTables.scroller.min.css" charset="utf-8" media="all">

    <script type="text/javascript"  src="../..//js/jquery.js"></script>
    <script type="text/javascript"  src="../..//js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src="../..//js/dataTables.scroller.min.js"></script>

</head>

<body>

<table id="dt_id" style="background:gray" class="compact hover order-column row-border"
       cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>ZIP / Post code</th>
        </tr>
    </thead>
</table>

<script type="text/javascript" >

    var dt;

    $(document).ready(function() {

        dt = $('#dt_id').DataTable( {
            ajax:           "t_load.php",
//            paging: false,
//            dom: "rti",
            dom: "rtiS",
            scrollY: 200,
        } );

        $('#dt_id tbody').on('click', 'tr', function (event) {
                var iend1 = $(this).index();
                var iend2 = dt.row(this).index();
                alert (iend1 + ' ' + iend2);
        } );
    } );

</script>

</body>
</html>

OUTPUT;

echo $output;

code t_load.php

<?php

for ($i = 0; $i <= 5000; $i++) {
    $j = 5000 - $i;
    $dsp_rows[] = array($i+1, $j);
}

$arr = array (
    "draw" =>  $request['draw'],
    "data" => $dsp_rows,
);

echo json_encode($arr);
This discussion has been closed.