0

Возникает такая проблема, вывод большого объема данных из бд (средствами mysql и php) и их отображение в виде таблицы (html) занимает достаточно много времени (вывод 16к строк, в каждой строке 10 столбцов + применение к ним DataTable) занимает порядка 40 секунд (30 секунд это php+отрисовка обычной html таблица и еще 10 секунд применение DataTable). Вопрос в том, как это ускорить ( php запросы я выполняю с помощью mysqli, записываю данные в массивы, потом эти массивы в цикле while вывожу в виде таблицы html )?

10
  • 5
    Самый простой способ и правильный отображать порциями. Выгружайте по 100 записей и Добавьте кнопку "показать еще" или подгружать когда пользователь докручивает данные до конца таблицы, и подгрузка идёт с помощью ajax по несколько записей!. Commented 16 июн. 2020 в 8:54
  • 1
    @DmitriiSedov зависит от того, каков функционал таблицы. Если требуется сразу возможность сортировки по столбцам (и просмотр всех), то подход нужен иной.
    – teran
    Commented 16 июн. 2020 в 9:00
  • пагинация, принцип её работы описали выше Commented 16 июн. 2020 в 9:00
  • @teran всё верно, если она фронтом делается. В качестве альтернативы, я бы перенёс сортировку на бэк с помощью ajax. Далее проиндексировал в бд те поля по которым фильтрация и сортировка происходит. В результате задержки должны быть сведены к минимуму. Но отрисовывать сразу всё я считаю всё таки не корректно. Commented 16 июн. 2020 в 9:04
  • Если вы сначала всё в массив записываете, а потом еще раз выводите из массива, может сразу выводить? Думаю капельку да ускорит Commented 16 июн. 2020 в 9:21

2 ответа 2

1

Таблица:

<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() - условные функции для работы с БД. Не забываем про уязвимости и обрабатываем входящие данные.

11
  • Хорошо, спасибо, буду разбираться)
    – findley
    Commented 17 июн. 2020 в 14:04
  • JQ DataTable файл оформляется, как javascript файл и подключается, как <script> же?
    – findley
    Commented 17 июн. 2020 в 14:12
  • Всё верно. И там ещё полно "надстроек", есть в чём разбираться
    – InDevX
    Commented 17 июн. 2020 в 19:43
  • Не могли бы вы разъяснить еще кое что, пожалуйста. Я сижу ломаю голову и не понимаю, как это все будет выглядеть, если у меня несколько таблиц (например, две). Как мне вот этим способом взять данные из таблиц table и table_2 и отобразить в html, как одну?
    – findley
    Commented 22 июн. 2020 в 9:08
  • Если через ajax всё работает то на беке просто 1 метод сделать. Если данные не через ajax берутся а через переменную передаются, аля ..., data: <?= json_encode($data); ?>,..., то нужно 2 массива слить, тем же array_merge(), это если структура данных одинаковая.
    – InDevX
    Commented 22 июн. 2020 в 10:03
0

введите сюда описание изображенияindex.php

    <!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]);

?>
8
  • Откройте network и посмотрите response ajax запроса, там будет ошибка
    – InDevX
    Commented 23 июн. 2020 в 11:06
  • Сначала выдавало ошибку по поводу функции mres, но я вроде бы нашел ее в интернете и прописал. Сейчас выдает ошибку в запросе, но я не понимаю, что не так, для удобства сделал echo запроса, который приходит в функцию resultValue ( добавил в сам ответ, чтобы удобнее читалось)
    – findley
    Commented 23 июн. 2020 в 12:54
  • if($column['searchable'] == true && $_POST['search']['value'] != -1 ){ замените на if($column['searchable'] == true && $_POST['search']['value'] != -1 && !empty($_POST['search']['value']) ){
    – InDevX
    Commented 23 июн. 2020 в 12:58
  • @InDevX Добавил, но ничего особо не изменилось (новый ответ сервера выше) =(
    – findley
    Commented 23 июн. 2020 в 13:11
  • @InDevX Насколько я вижу, он лишнюю скобку ставит в запросе после WHERE, но пока я не понимаю, как убрать это, но чтобы в запросах, где она нужна, продолжала ставиться
    – findley
    Commented 23 июн. 2020 в 13:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.