Серверная часть с данными> 17 000 строк. Работает очень хорошо.
При инициализации таблицы данных отображаются первые 10 строк.
Теперь мне нужно динамически (через Javascript / Jquery) прокрутить до указанной строки c, которая НЕ отображается на странице, поскольку она не является частью первых 10 строк.
В HTML есть элемент (id = "myUserId"), содержащий значение ячейки в столбце с именем "Id". Этот столбец содержит уникальных значений. (То, что я показываю здесь, просто для демонстрации моей проблемы. В моем реальном проекте этот элемент "myUserId" получит свое значение из переменной $ _SESSION) .
Мне нужен Javascript / Jquery, чтобы прокрутить вниз и показать 10 строк, содержащих строку со значением 'myUserId' в столбце 'Id'.
Буду признателен за любую помощь!
Вот что показано:
Это то, что мне нужно:
Мой код:
<!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)
);