Возникает такая проблема, вывод большого объема данных из бд (средствами mysql и php) и их отображение в виде таблицы (html) занимает достаточно много времени (вывод 16к строк, в каждой строке 10 столбцов + применение к ним DataTable) занимает порядка 40 секунд (30 секунд это php+отрисовка обычной html таблица и еще 10 секунд применение DataTable). Вопрос в том, как это ускорить ( php запросы я выполняю с помощью mysqli, записываю данные в массивы, потом эти массивы в цикле while вывожу в виде таблицы html )?
-
5Самый простой способ и правильный отображать порциями. Выгружайте по 100 записей и Добавьте кнопку "показать еще" или подгружать когда пользователь докручивает данные до конца таблицы, и подгрузка идёт с помощью ajax по несколько записей!.– Dmitrii SedovCommented 16 июн. 2020 в 8:54
-
1@DmitriiSedov зависит от того, каков функционал таблицы. Если требуется сразу возможность сортировки по столбцам (и просмотр всех), то подход нужен иной.– teranCommented 16 июн. 2020 в 9:00
-
пагинация, принцип её работы описали выше– HTMLProgrammerCommented 16 июн. 2020 в 9:00
-
@teran всё верно, если она фронтом делается. В качестве альтернативы, я бы перенёс сортировку на бэк с помощью ajax. Далее проиндексировал в бд те поля по которым фильтрация и сортировка происходит. В результате задержки должны быть сведены к минимуму. Но отрисовывать сразу всё я считаю всё таки не корректно.– Dmitrii SedovCommented 16 июн. 2020 в 9:04
-
Если вы сначала всё в массив записываете, а потом еще раз выводите из массива, может сразу выводить? Думаю капельку да ускорит– Давид МанжулаCommented 16 июн. 2020 в 9:21
|
Показать ещё 5 комментариев
2 ответа
Таблица:
<table id="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<td><input placeholder="type id to search..." /></td>
<td><input placeholder="type name to search..." /></td>
<td><input placeholder="type Description to search..." /></td>
<td></td>
</tr>
</tfoot>
</table>
JQ DataTable:
var timeout;
var table = $('#table').DataTable({
"processing": true,
"serverSide": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pageLength": 25,
"ajax": {
"url": "/path/to/back.php", // ссылка, которая "отдаёт" данные
"type":"POST",
},
"order": [[0, 'asc']],
"columns":[
{data: "id",name:"id", render: function (data) {
return '<a href="link/to/smth/'+data+'>'+data+'</a>'; // ID обернуть в ссылку
}},
{data: "name", name:"name" },
{data: "Description", name:"Description"},
{data: "create_date", name: 'create_date', searchable: false} //create_date без поиска
],
initComplete: function () {
$('#table > tfoot input').keyup(function () {
clearTimeout(timeout);
var idx = $(this).closest('td').index();
table.column(idx).search($(this).val());
timeout = setTimeout(function () {
table.draw(true);
}, 1000);
});
}
});
И содержимое /path/to/back.php
который отдаёт данные
$pre = " ";
$select = "SELECT SQL_CALC_FOUND_ROWS id, name, description, create_date FROM table ";
$where = "";
$search = "";
if( sizeof($_POST['columns']) > 0 ) {
$searchPre = $pre."(";
foreach($_POST['columns'] as $column){
if($column['searchable'] == true && $_POST['search']['value'] != -1 ){
$search .= $searchPre. $column['name']." LIKE '%".mres($_POST['search']['value'])."%'";
$searchPre = " OR ";
}
}
$search .= ")";
$pre = " AND ";
if (strlen($search)>0) { $where = ' WHERE '; }
}
if( isset($_POST['order'][0]) ){
$col_name = $_POST['columns'][$_POST['order'][0]['column']]['name'];
$limit_and_order .= ' ORDER BY '.$col_name.' '.$_POST['order'][0]['dir'];
}
$limit = filter_input(INPUT_POST,'length', FILTER_VALIDATE_INT );
if($limit != -1){
$start = filter_input(INPUT_POST, 'start', FILTER_VALIDATE_INT);
$limit_and_order .= " LIMIT ".$start.",".$limit;
}
$q = $select.$where.$search.$limit_and_order;
$data = resultValue($q);
$total = resultValue("SELECT FOUND_ROWS()");
echo json_encode(["draw"=>intval($_POST['draw']), "recordsTotal"=>(int) $total, "recordsFiltered"=>(int) $total, "data"=>$data]);
Вот, такой, вот, простой пример получился. resultValue(). resultRow() - условные функции для работы с БД. Не забываем про уязвимости и обрабатываем входящие данные.
-
-
JQ DataTable файл оформляется, как javascript файл и подключается, как <script> же?– findleyCommented 17 июн. 2020 в 14:12
-
Всё верно. И там ещё полно "надстроек", есть в чём разбираться– InDevXCommented 17 июн. 2020 в 19:43
-
Не могли бы вы разъяснить еще кое что, пожалуйста. Я сижу ломаю голову и не понимаю, как это все будет выглядеть, если у меня несколько таблиц (например, две). Как мне вот этим способом взять данные из таблиц table и table_2 и отобразить в html, как одну?– findleyCommented 22 июн. 2020 в 9:08
-
Если через ajax всё работает то на беке просто 1 метод сделать. Если данные не через ajax берутся а через переменную передаются, аля
..., data: <?= json_encode($data); ?>,...
, то нужно 2 массива слить, тем же array_merge(), это если структура данных одинаковая.– InDevXCommented 22 июн. 2020 в 10:03
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css">
<script type="text/javascript" charset="utf8" src="DataTables/datatables.min.js"></script>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<td><input placeholder="type id to search..." /></td>
<td><input placeholder="type name to search..." /></td>
<td><input placeholder="type Description to search..." /></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
<script>
var timeout;
var table = $('#table').DataTable({
"processing": true,
"serverSide": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pageLength": 25,
"ajax": {
"url": "back.php", // ссылка, которая "отдаёт" данные
"type":"POST",
},
"order": [[0, 'asc']],
"columns":[
{data: "id",name:"id", render: function (data) {
return '<a href="link/to/smth/'+data+'>'+data+'</a>'; // ID обернуть в ссылку
}},
{data: "name", name:"name" },
{data: "Description", name:"Description"},
{data: "create_date", name: 'create_date', searchable: false} //create_date без поиска
],
initComplete: function () {
$('#table > tfoot input').keyup(function () {
clearTimeout(timeout);
var idx = $(this).closest('td').index();
table.column(idx).search($(this).val());
timeout = setTimeout(function () {
table.draw(true);
}, 1000);
});
}
});
</script>
back.php
<?php
$servername = "localhost";
$database = "my_in";
$username = "Admin";
$password = "8Admin702";
$conn = mysqli_connect($servername, $username, $password, $database);
function resultValue($my_select)
{
global $conn;
// mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$result = mysqli_query($conn,$my_select);
return mysqli_fetch_assoc($result);
}
function mres($value)
{
$search = array("\\", "\x00", "\n", "\r", "'", '"', "\x1a");
$replace = array("\\\\","\\0","\\n", "\\r", "\'", '\"', "\\Z");
return str_replace($search, $replace, $value);
}
$pre = " ";
$select = "SELECT SQL_CALC_FOUND_ROWS id, name, description, create_date FROM table ";
$where = "";
$search = "";
if( sizeof($_POST['columns']) > 0 ) {
$searchPre = $pre."(";
foreach($_POST['columns'] as $column){
if($column['searchable'] == true && $_POST['search']['value'] != -1 && !empty($_POST['search']['value']) ){
$search .= $searchPre. $column['name']." LIKE '%".mres($_POST['search']['value'])."%'";
$searchPre = " OR ";
}
}
$pre = " AND ";
if (strlen($search)>0) { $search .= ")"; $where = ' WHERE '; }
}
if( isset($_POST['order'][0]) ){
$col_name = $_POST['columns'][$_POST['order'][0]['column']]['name'];
$limit_and_order .= ' ORDER BY '.$col_name.' '.$_POST['order'][0]['dir'];
}
$limit = filter_input(INPUT_POST,'length', FILTER_VALIDATE_INT );
if($limit != -1){
$start = filter_input(INPUT_POST, 'start', FILTER_VALIDATE_INT);
$limit_and_order .= " LIMIT ".$start.",".$limit;
}
$q = $select.$where.$search.$limit_and_order;
$data = resultValue($q);
$total = resultValue("SELECT FOUND_ROWS()");
echo json_encode(["draw"=>intval($_POST['draw']), "recordsTotal"=>(int) $total, "recordsFiltered"=>(int) $total, "data"=>$data]);
?>
-
Откройте network и посмотрите response ajax запроса, там будет ошибка– InDevXCommented 23 июн. 2020 в 11:06
-
Сначала выдавало ошибку по поводу функции mres, но я вроде бы нашел ее в интернете и прописал. Сейчас выдает ошибку в запросе, но я не понимаю, что не так, для удобства сделал echo запроса, который приходит в функцию resultValue ( добавил в сам ответ, чтобы удобнее читалось)– findleyCommented 23 июн. 2020 в 12:54
-
if($column['searchable'] == true && $_POST['search']['value'] != -1 ){
замените наif($column['searchable'] == true && $_POST['search']['value'] != -1 && !empty($_POST['search']['value']) ){
– InDevXCommented 23 июн. 2020 в 12:58 -
@InDevX Добавил, но ничего особо не изменилось (новый ответ сервера выше) =(– findleyCommented 23 июн. 2020 в 13:11
-
@InDevX Насколько я вижу, он лишнюю скобку ставит в запросе после WHERE, но пока я не понимаю, как убрать это, но чтобы в запросах, где она нужна, продолжала ставиться– findleyCommented 23 июн. 2020 в 13:26