(I opened similar question in Stackoverflow and got 0 replies. Hopefully someone here would give me a hand...)
Datatable server side with > 17,000 rows. Works very well.
At initializing the datatable, it shows the first 10 rows.
Now I need to dynamically (via Javascript/Jquery) scroll to a specific row which is NOT shown on the page because it isn't part of the 1st 10 rows.
The HTML has an element (id="myUserId") containing the value of a cell in a column named 'Id'. This column contains unique values. (What I show here is just for demoing my problem. In my real project, this "myUserId" element will get its value from a $_SESSION variable).
I need Javascript/Jquery to scroll down and show the 10 rows containing the row with the value of 'myUserId' in its 'Id' column.
Any help would be appreciated!
This is what is shown :
This is what I need :
My code :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
</head>
<body class="bg-white">
<div class="wrapper">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mr-n2 ml-n2 mb-n2 bg-white rounded">
<a id="myUserId">34</a>
<div class="container border border-dark rounded">
<div class="row">
<div class="col-md-12 col-md-offset-2 myMargTop20 rounded">
<table id="usersTable" class="display table border border-dark table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr class="myLightPurpleBgColor font-weight-bold">
<td>Id</td>
<td>Full Name</td>
<td>User Name</td>
</tr>
</thead>
<tfoot>
<tr class="myLightPurpleBgColor font-weight-bold">
<td>Id</td>
<td>Full Name</td>
<td>User Name</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script>
$(document).ready(function() {
var jsTable = $('#usersTable').DataTable({
'scrollX': true,
'pagingType': 'numbers',
'processing': true,
'serverSide': true,
'ajax': 'datatablesServerSide.php',
});
});
</script>
</body>
</html>
My datatablesServerSide.php :
<?php
$table = "users";
$primaryKey = "usrId";
$columns = array(
array("db" => "usrId", "dt" => 0),
array("db" => "usrFullName", "dt" => 1),
array("db" => "usrName", "dt" => 2)
);
$sql_details = array(
"user" => "root",
"pass" => "",
"db" => "a_my_project",
"host" => "localhost"
);
require("ssp_with_UTF8.class.php");
echo json_encode(
SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns)
);