<?php
$db_host = "localhost";
$db_name = "test_codez";
$db_user = "root";
$db_pass = "";
$db = mysqli_connect ($db_host, $db_user, $db_pass, $db_name) or die ("Невозможно подключиться к БД");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Anton Dobrynin Kazan</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
</head>
<body>
<table class="sort" style="width:100%">
<thead>
<tr>
<th>Alphabetic</th>
<th>Numeric</th>
<th>Date</th>
<th>Unsortable</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM test_table2 ";
$sql = mysqli_query($db, $sql);
while ($result = mysqli_fetch_array($sql))
{
echo "<tr><td>".$result['Alphabetic']."</td><td>".$result['Numeriс']."</td><td>".$result['Date']."</td><td>".$result['Unsortable']."</td></tr>\n";
}
?>
</tbody>
</table>
<script>
window.addEventListener("DOMContentLoaded", function() {
(function(f) {
function g(c) {
return function(b, a) {
b = b.cells[c].textContent;
a = a.cells[c].textContent;
b = +b || b;
a = +a || a;
return b > a ? 1 : b < a ? -1 : 0
}
}
var d = document.querySelector(f),
e = [].slice.call(d.rows, 1);
[].slice.call(d.rows[0].cells).forEach(function(c, b) {
var a = 0;
c.addEventListener("click", function() {
e.sort(g(b));
a && e.reverse();
e.forEach(function(a) {
d.appendChild(a)
});
a ^= 1
})
})
})(".sort")
});
</script>
</body>
</html>
html полностью готовить на стороне клиента на JS— в вашем будет значить примерно следующее:
<tbody>
<?php
$sql = "SELECT * FROM test_table2 ";
$sql = mysqli_query($db, $sql);
while ($result = mysqli_fetch_array($sql))
{
echo "<tr><td>".$result['Alphabetic']."</td><td>".$result['Numeriс']."</td><td>".$result['Date']."</td><td>".$result['Unsortable']."</td></tr>\n";
}
?>
</tbody><?php
$sql = "SELECT * FROM test_table2 ";
$sql = mysqli_query($db, $sql);
$return = [];
while ($result = mysqli_fetch_array($sql))
{
$return[] = $result; // Здесь просто собираем данные в одну переменную
}
?>
<script>
<? echo "var resultArr='".json_encode($return)."'"; ?> // сюда мы передали переменную в JS
// тут должен быть какой-то JS-шаблонизатор, который разберет массив и сформирует таблицу по шаблону
</script>
<tbody>
</tbody>
Вот основные этапы этого процесса:
Обработка HTML для создания дерева DOM.
Создание дерева рендеринга.
Расчёт параметров расположения элементов дерева рендеринга на экране, формирование макета страницы.
Визуализация (отрисовка) дерева рендеринга.
www.pvsm.ru/javascript/276021
Простой
Средний
Простой
