row index on scroller extension
row index on scroller extension
gfu14416
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.