datatables server side select specific row
datatables server side select specific row
gadibh53
Posts: 7Questions: 2Answers: 0
(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)
);
Answers
I would say that is outside of Datatables builtin functionality. One option is to use a separate Ajax request with the value to find and the Datatables page length. Your server script will need to determine the page the data is on, return the page number then use
page()to have Datatables fetch that page via Server Side Processing.Kevin
Thank you so much, Kthorngren. I will check it out in a couple of days and post my results here.